How to change the iPhone On-Screen-Keyboard in Web Apps
Montag, Februar 22nd, 2010Nearly 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.
Es ist noch gar nicht so lange her, da musste man beim Web-Design noch auf die kleineren Auflösungen der 
Im offiziellen 
Ein weiteres mal hat mich ein Twitter-User auf eine ganz nette Initiative aufmerksam gemacht: Peter Höflehner berichtet in seinem 
In den vergangenen Minuten waren die Timelines auf Twitter prall gefüllt mit “Don’t Click” Statusupdates, die alle auf 
Alle Blogger unter uns dürfte das neue 
Kaum eine moderne Seite kommt in der heutigen Zeit ohne eine vernünftige Javascript bzw. AJAX Library aus. Diese helfen bei der schnellen Entwicklung von Webanwendungen und zaubern all die tollen Effekte auf unsere Bildschirme, die man in der Web 2.0 Generation lieben gelernt hat. Der einzige Nachteil dabei ist, dass die Dateigröße der Libraries über die Zeit ziemlich angestiegen ist. Script-Dateien von 100kb und mehr sind keine Seltenheit und beschäftigen sowohl Seitenbetreiber als auch Besucher mit hohem Traffic.
Fabian Pimminger - geboren im Dezember 1989 - lebt in Inzersdorf im Kremstal, Österreich - Schüler, bald Student - süchtig nach Musik, Web Design, Internet - liebt Gadgets - verabscheut Spinnen, sonstige Krabbeltiere, Sonntage und Montage.
