Default To The Numeric, Email, And URL Keyboards On The iPhone

Posted September 29, 2009 at 8:58 AM

Tags: HTML / CSS

A long time ago, it used to work on the iPhone Safari browser that if your form inputs had the term "zip" or "phone" in the form field name, clicking on it would default the resultant iPhone keyboard to a numeric keyboard. While this forced us to use some really poor naming conventions, it increased the usability of our web-based iPhone applications in a very palpable way, removing unnecessary clicks for data entry. Unfortunately, this feature was lost somewhere among the many subsequent iPhone firmware updates.

It felt like all was lost and there was no hope... until now. Dorinake, in the comments of my previous post, just explained that if he changed the Type attribute of his form inputs to "number" then he would get the numeric keyboard on the iPhone browser. I also confirmed this, and after doing a bit more testing, it looks like the iPhone now (in the latest firmware updates) supports a small sub-set of the HTML 5 input types:

• Number
• Email
• Url

To test this, I set up a tiny sample page to see how each of these input Types would default the keyboard on the iPhone:

 Launch code in new window » Download code as text file »

As you can see, the Type attributes of the above Input fields are Number, Url, and Email respectively. When I open this page on my iPhone browser and click on the individual form fields, here are the keyboards that I get:

iPhone Input Type="Number"

iPhone Input Type="Url"

iPhone Input Type="Email"

This is so awesome! And, what's great is that any browser that doesn't recognize these new HTML 5 input types will simply treat the input as a Text input. As such, this is completely backwards compatible. After discussing this insight with some people, it seems that even on the some of the most up-to-date phones, there are people who are not seeing the appropriate keyboards; we're not sure why this is happening but, there's certainly no harm in putting in the appropriate input types in the meantime.

Download Code Snippet ZIP File

Post Comment  |  Ask Ben  |  Other Searches  |  Print Page

• Add To Del.icio.us
• Add To Digg
• Add to Spurl.net
• Add to Wists
• Add to Simpy
• Add to Newsvine
• Add to BlinkList
• Add to Furl
• Add to reddit
• Add to FARK
• Add to BlogMarks
• Add to Yahoo! My Web
• Add to smarking
• Add to Ma.gnolia
• Add to Segnalo

Reader Comments

Woot. Thanks for sharing this. I wonder if Apple updated their docs? The last time I did research into this, they _did_ have decent documentation about writing web apps for the iPhone, so I'd be willing to bet they have this documented.

@Raymond,

Would you mind posting a link the docs? I am not sure where they are.

What's exciting about this is that due to the MMS updates, I am sure most everyone is going to be updating their iPhones; which means, most people will get this updates.

Will do - I'm in the middle of my own blog post though. ;)

@Raymond,

No worries :)

I thought we had this worked out between you two? No overlapping blog authoring. Whomever goes first, must wait at least 30 minutes before the next person can start authoring their post. Sheesh.

"There can be only one."

I'm looking now Ben. I'm now remembering how much of a pain in the ass Apple's site is. I can say that it does NOT require the 99 dollar program fee. Digging now.

Well I found it:

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html

But while it mentions some special stuff in forms, it does not mention what you found.

@Todd,

HA ha.

@Raymond,

Awesome! I don't think I've every seen that page AND I have actually tried to find good documentation on this stuff (granted via Google rather than Apple's site). Thanks.

More data:

http://ajaxian.com/archives/html5-features-in-latest-iphone-application-cache-and-database

FYI, the db stuff is incredibly cool and no one (that I know of) is working with this yet. It's much like the db support for AIR, but the browser itself supports it. I've meant to look into it, but haven't yet.

The second item described there looks to be real nice for web based HTML apps for the iPhone.

More URLs: The db stuff is freaking incredible: http://blog.bemoko.com/2009/09/16/cool-iphone-handles-the-html5-onstorage-event-handler/

@Raymond,

Awesome stuff! I'll definitely be looking into it.... when I can find the time :(

Last URL, I promise. ;) The Safari in the newest iPhone also supports geolocation:

http://blogs.computerworld.com/iphones_safari_browser_to_include_geolocation_0

I confirmed it on my iPhone (it also works in FF3.5).

@Ben: you can add also the password type, thus you'll have a password field.

More data:

http://ajaxian.com/archives/html5-features-in-latest-iphone-application-cache-and-database

that's usefull thanks

Hi Ben,
This might be a silly question, but, do you work with iPhone apps? Or was this just a personal interest because you might have one?

@Jillian,

Yes, I do work on iPhone applications.

Very cool I always like apps that switch the keyboard were it makes since
@Ray the db stuff is way cool. There are some libraries that let you write code that will work in air, safari, google gears and fall back to flash or cookie local storage also. So write once and run on many platforms. Google uses the local storage for Gmail is safari on the iPhone. Check out setting for safari to see what site are using storage.

@Ben you should update the contact form on your blog with the new field types.

Really cool !!

So is it possible to have both types password and number ?

Something like :
<input type="password" type="number" name="n1" />

Thanks

@Drake,

I am not sure about that. I think you can only specify one type at a time.

Hi Ben,

Thanks for answering!

I was wondering about that because Dorinake said somehing like that in a previous post, but I can't test it right now. I'll let you know asap if it's possible.

I found one more0 type="tel" will give you the alphanumeric keypad!

http://potch.me/iphone

@Potch,

Ahh, nice!

What generation/firmware version do you need? Your example code doesn't work on mine.

@Nic,

I'm rocking out version 3.1 (7C144) according to my General settings.

Hi, is it possible to change input type in ASP page? I tried to do this in Javascript after page load, but Iphone seems to ignore my change.

@gorczas,

I am not sure that you can change input types at runtime? I have never tried that.

I tried and according to Firebug I succeced, but IPhone didn't notice the change :/

@Gorczas,

Gotcha. Still, I would try to avoid switching types at runtime.

Hi,

first of all thanks for the help from you guys

I have doubt
does file upload works in iphone browser , i found type file as disabled , any method to upload file from a web app

Hi guys,

Well, Apple has issued an updated doc for that on 2009-09-24...

Within this doc, you will find all keyboard types, viewport tricks, how to disable auto-correction and auto-capitalization on html fields and more....

http://developer.apple.com/safari/library/codinghowtos/mobile/userexperience/index.html

Hope this helps !

Ps: This works only for iPhone OS 3.1.x and later. ;)

Cheers!

@Ygor,

Awesome, thanks!

@Thomas,

I don't think you can upload files since the iPhone doesn't have a file system in the traditional sense.

Might try type = tel.... Numbers only no alpha on the keyboard. Worth mentioning that the search type is also available.

Great news! I talked to some of the Apple engineers working on mobile Safari at WWDC09 regarding this issue. The response I got was that the old style (setting name attribute to zip, phone etc) was non W3C standard and they had no plans to fix it. I was recommended to file a feature request in Radar. Great that they looked into this. Maybe a lot of developers have complained about this? Thanks for the tips!

@Marthin,

It's good to know that the engineers are thinking about it. At least it works with the new "type" values.

Can anyone else confirm that autofill doesn't work when you use input type="email" or type="number"?

I was beating my head against the screen trying to figure out why autofill skipped certain fields until I switched them back to input type="text" and then autofill worked again.

Seems like a major oversight.

@Nate,

I am not sure that I know much about the autofill on the iPhone. Are you talking about native browser behavior?

Yep, native browser behavior with the latest iPhone OS using Mobile Safari.

If I have a form with zip, email, and phone number fields that all use input type="text", the autofill function works fine with Mobile Safari, all fields are populated with my data.

If I change them to type="number" and type="email" to get those handy keyboard layouts, the autofill doesn't recognize the fields, and therefore leaves them blank.

For a complex checkout form, I'd say usability is better served by keeping them type="text" so autofill works.

@Nate,

Funky. Yeah, I guess at times when you want to have data autofilled, going with text is gonna be better. I think the only times I would really use this in a practical way would be to use the numeric keyboard to have people enter in numeric line items (which will never be autofilled).

I just filed a bug report with Apple. It's the same behavior with normal Safari, see:

http://clixel.com/test_form.html

I agree, for the form in question I ended up using type="number" for credit card and CVV fields, but left the phone, email and zip fields as type="text" for autofill compatibility.

@Nate,

Yeah, that makes sense - auto-filling CVV fields :)

Post Comment  |  Ask Ben

Post A Comment

Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:	Formatting: <strong>bold</strong> <em>italic<em>
	Remember my information
	Subscribe to entry *
	Send me a copy of this comment (as part of the comment thread)

 

* If you subscribe, any new posts to this thread will be sent to your email address.