Controlling which iOS keyboard is shown
Note: Please be aware that as of iOS5 parts of this post are now of date (email inputs no
longer auto-capitalise, for example).
One of my pet hates (there are many), is being presented with the incorrect keyboard, or
having auto capitalisation forced upon me, when entering information into web forms on
my iPhone or iPad. This is something that's very easy to control and can be done so with a
little sprinkle of HTML5. You don't even have to worry about old browsers - I've tested this
to work perfectly well even in IE6.
The screenshots used in this post are from a UK based iPhone 4S running iOS5; previous
versions of iPhone OS and the iPad will differ.
Text keyboard
Paste_Image.png
Your standard text input field code will look something like this:
<input type="text">
Telephone keyboard
Paste_Image.png
In order to display the telephone keyboard, use this:
<input type="tel">
URL keyboard
Paste_Image.png
For URLs you want this:
<input type="url">
Email keyboard
Paste_Image.png
For email addresses, you want this:
<input type="email">
Numerical keyboard
Paste_Image.png
And finally, for a simple numerical keyboard (similar to the telephone one but with no +, *
and # key):
<input type="text" pattern="[0-9]*">
Other options
It's also possible to control auto correct with the use of the following paramater:
autocorrect="off"
Last, but by no means least, turning on or off auto capitalisation:
autocapitalize="off"
So the next time you're creating a login field that takes an email address, use something
like this:
<input type="email" autocorrect="off" autocapitalize="off">
Paste_Image.png
网友评论