How to change the iPhone On-Screen-Keyboard in Web Apps

Nearly three years ago, when Apple introduced the iphone, so-called “Web Apps” were the only way to develop and publish self-made applications on Apple’s new and shiny gadget. With the announcement of the SDK and the launch of the App Store, developers started abandoning web applications and began flocking to native development. But this is not the end of web-based applications: Recently Google declared the end of mobile app stores and with Google Voice, Buzz and GMail, the company started to port their entire range of services to the mobile web. Besides that, HTML5 provides the much-needed technologies (offline access, storage, location awareness) to really make web-based applications great and useful.

On of the biggest problems developers are facing with mobile web applications is the user interface/experience. We have to reach the superior quality GUI of native applications together with all the conveniences they are offering to users. The majority of web sites for example are using the plain old on-screen-keyboard for every text input, no matter what characters will be entered. It isn’t really comfortable to enter an email-address when you have to change to the secondary keyboard to enter a “@”. Just the same as having to change it for entering numbers in an input element that is only ment to contain numbers anyway.

This is probably the most common user interface problem and it is also one of the easiest to fix. The HTML5 specification contains an extension to the type attribute of input elements that is perfectly recognized by Mobile Safari. With just a little change, you are able to make your web-based application more convenient to use. And by the way: Browsers that don’t understand the new type attributes will ignore it and keep displaying a normal input element.

It is as simple as the following code snippet:

Text: <input type="text" /> <!-- display a standard keyboard -->
Telephone: <input type="tel" /> <!-- display a telephone keypad -->
URL: <input type="url" /> <!-- display a URL keyboard -->
Email: <input type="email" /> <!-- display an email keyboard -->
Zip Code: <input type="text" pattern="[0-9]*" /> <!-- display a numeric keyboard -->

Just change to type attribute to either “tel”, “url” or “email”. Additionally you can alter use the new pattern attribute to only allow numbers. I’ve set up a demo page which can be accessed with every iPhone and iPod Touch. Please note, that this feature is only supported in iPhone OS 3.1 or newer.