Some while ago I've written a little web app at home that
a) needs mainly numeric input
and
b) is used mainly from an iPod touch / iPad / other mobile device.
On all of those devices, numeric input is cumbersome, because you first have to switch the virtual keyboard into numeric mode.
Yesterday I googled around again for this, and finally
found a solution.
HTML5 has some more
types to
INPUT fields:
type="email" | for email addresses |
type="url" | for web addresses / URLs |
type="number" | for numeric input |
All of them have the effect on the iPhone/iPad that they switch to a virtual keyboard layout that is optimized for the input, e.g.
The
email-keyboard on the iPhone will have the @-sign there
The
url-keyboard on the iPhone will have the ".com" key; also the . and the / key will be placed more prominently.
The
number-keyboard on the iPhone will switch the numbers in the top row.
On my Android 2.2 [1] HTC only the number mode works, but it gives you a numeric block / phone-style keyboard, which is even better for numeric input.
HTML5 defines some more values for the type like "date", "week", "month", "time", ... and "range" for sliders, i.e. for numeric values with clear and narrow boundaries, but those are rarely implemented as of today.
See
Dive Into HTML5 for an excellent overview including browser-support.
Since all of the above are defined only starting HTLM5, they are not "supported" on many current browsers, but the good thing is, that all browsers, that do not explicitely support them, revert to type="text" for unknown input-types.
Also there is a new attribute
placeholder:
Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click on (or tab to) the input field, the placeholder text disappears. (from
Dive Into HTML)
Sort of like the search box in Firefox.
So back to my initial problem, defaulting to numeric input on mobile devices.
Just replace
input type="text" with
input type="number", there is no down-side to this.
It is user-friendly on mobile devices, and works like it used to on all other browsers.
--
[1] I'll check 2.3 and 3.0 once my PC is fast enough for the SDK.