An overview of different iPhone keyboards in Mobile Safari

iPhone iOS 5.0 offers different keyboard layouts depending on the task the user has to perform. It is important to use the right keyboard for each input field, because typing on an iPhone is – compared to a full-fledged laptop – a pain. I could not find a single overview of all keyboard layouts that are supported in Mobile Safari on iOS5 so I made one myself. HTML5 offers all kinds of new <input /> types and iOS has some special keyboards for some of those.

I will start with an overview of all keyboards and conclude with some modifiers that can change the behavior of text input fields.

Default text keyboards

These are the default keyboards you will get when you use a plain, vanilla <input type=”text” /> field.

You can get these keyboards by just adding a normal <input type=”text” /> field to your web page. You can get the optional Go button if you put the <input /> element in a <form /> element that has an action attribute (value is not important). When the users presses to Go button, the form will be submitted. You can capture this event by observing the submit event on the form. It is not possible to get the Go button in a <textarea /> element, you will always get the first keyboard with the return button.

Email, URL and numeric / special characters keyboard

You can trigger these keyboards with the <input type=”email” />, <input type=”url” /> and <input type=”number” /> input elements.

These keyboards are a variation of the regular keyboards (picture of URL keyboard not included). The email keyboard offers easy access to the @-sign and disables autocorrect and autocapitalization for the keyboard, which is pretty useful for a dedicated email field. It can be triggered by using the <input type=”email” /> tag.

The URL keyboard (picture not included) has an additional button for inserting “.com”. It is the same keyboard that you use in Mobile Safari for entering URLs. If you want to use this keyboard, use an <input type=”url” /> tag.

The special characters keyboard can triggered by using an <input type=”number” /> tag. Even though you cannot enter non-decimal character in most desktop browsers with this type of input, on iPhone you can enter any character (you can switch back to normal keyboard layout by using the ABC button).

For all three keyboard layouts goes that you can add a Go button if you wrap the <input /> element in a <form /> element with an action attribute.

Numeric keyboards

iOS 5 offers two numeric keyboards on iPhone: one for entering phone numbers and one for entering digits only.

These two variants of the same keyboard serve specialized functions. This first keyboard kan be used to enter phone numbers: it has dedicated buttons for each digit and offers a button for special phone characters such as +, * and #. An iPhone user cannot switch back to a different keyboard layout if you use this one. It is triggered by creating an <input type=”tel” /> element.

The second variant is the same but lacks the button for entering non-digit characters. You can trigger this keyboard layout by using the HTML5 pattern=”[0-9]*” attribute. pattern is an attribute that can be used on elements to specify a regular expression that the input value has to match. This particular regular expression means “a character between 0 and 9, repeated 0 or more times”. The type of input can be both “text”, “number” or “tel”. Full example: .

You cannot have  a “Go” button with these two layouts.

Bonus: the search keyboard

iOS offers a dedicated keyboard for searches as it is a common task:

It is the same as the normal text keyboard layout but here the “Go” button has been replaced with a “Search” button. Another difference is that the <input /> element is styled differently: it has rounded corners. You can trigger it by creating an <input type=”search” /> element in a <form /> element with an action attribute.

Auto correction and auto capitalization

Autocorrection (the little balloons that pop up when you mistype a word) can also be controlled per <input /> element. There are few reasons to disable it, but it is useful to turn it of for fields where the user has to enter a username, since these are often words not in a dictionary. You can control it by setting the autocorrect attribute to “on” or “off”.

The same goes for auto capitalization. If you have a field that for some reason should not start with a capital letter (other than an email or url field) you can control this feature with the autocapitalization attribute.

Apple has some pretty interesting documentation on how to design a form in Mobile Safari.

Auto focus

You can control the focus of an <input /> element by using the autofocus=”on” attribute. The element will then receive focus. This means that the keyboard will show up and the user can immediately start typing. Unfortunately it is not possible to have a web app or web page open with the focus already on a field (you cannot set focus from the onload or ondomready events). This is because many web sites use this technique and it would be really annoying to surf the web with this feature enabled.

Conclusion

Using the correct keyboard will lower the effort the user has to put into filling out your form. It will make your web app feel more like a native app. It is really useful and almost free, so there are few reasons not to use it. Older browsers will ignore the special attributes and type values so these advanced types are backwards compatible too.

If you have any questions or feel like I missed a keyboard layout, please leave a comment.