iPhone web applications and specific input types

Question

I remember seeing a tutorial a while back on this but am unable to re-Google it.

Supposedly there is a way to get Safari on the iPhone to give keyboards other than the default. It went something along the lines of this, where certain keywords in the input name attribute triggered it...

This would give the default keyboard:

<input type="text" name="normal_text" />

This would give the number entry keyboard:

<input type="text" name="blah_blah_zip" />

This would give the number entry keyboard:

<input type="text" name="blah_blah_email" />

Does anyone know if this is still an available feature, and if so, what the keywords for triggering it are? Thanks!

Solution

The Safari for iPhone How-To's indicate this is still possible with a different syntax.

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 -->

Note:

To display a numeric keyboard, set the value of the pattern attribute to "[0-9]*" or "\d*".

Comments

[ceejayoz]

Looks like that was added in OS 3.1. Sweeeeet!

[Ubermonk]

Note, if you're testing your app in the iPhone Simulator and this doesn't work, make sure the simulator is configured to use OS 3.1 or later! That was my problem. Go to Hardware > Version > 3.1

[lapo]

Notice that also type="time" is supported (and some others, I guess), but I found no way to specify the granularity of minutes (some apps use 5-mins steps, but HTML5 step attribute doesn't do the trick).

[Erdal G.]

@iTux : I only saw pattern="[0-9]*" actually working on iOS safari