Defaulting To The Numeric Keyboard On The iPhone

Posted April 14, 2008 at 8:56 AM

Tags: ColdFusion, HTML / CSS

As I have been using my Dig Deep Fitness iPhone fitness application over the last few months, I have noticed a few things that need to be improved; one of the biggest points of friction is the fact that 98% of the text input in the application is numeric and yet, every time I click on an input field, I am presented with the iPhone's Alpha keyboard, which I then have switch over to the numeric keyboard. This adds like 50% more clicking than is unnecessary and the keyboard input is quite misaligned with the goal of the user experience. When I first started building this iPhone fitness software, I looked for a way to default the iPhone's keyboard to the numeric one, but I couldn't find anything. I did find information on the -wap-input-format CSS property, which allows you to restrict formatting of text input fields, but these seemed to be ignored by the iPhone!

I thought all was lost and that I would have to suffer with the default Alpha keyboard; but then, this weekend, I went to fandango.com, which redirected me to iphone.fandango.com - their iPhone optimized mobile site (which is extremely well done, by the way). When I went to enter my zip code location, I clicked on the input and was immediately presented with the iPhone's numeric keyboard!! I almost couldn't believe my eyes. I had to cancel out of the input and then click on the text box again, just to make sure that I wasn't imagining what I had just seen. And yep, sure enough, I was presented with the numeric keyboard again.

This morning, I was determined to figure out how this was happening. The first thing I did was switch my FireFox's User Agent to mimic the iPhone and checked out Fandango's iPhone site. Here is the HTML for their ZIP intake form:

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

I was expecting to see some cool CSS or META tags or even a Safari-proprietary tag attribute... but nothing. I checked the style sheet. Again, nothing. There didn't seem to be anything that would make the input default to the iPhone's numeric keypad. And so, I set off to Google for some answers. After a while, I found some information about input naming on the iPhone. Apparently, if you include "phone" or "zip" in the input field name, then the iPhone will default to the numeric keyboard. I didn't immediatly try this on Dig Deep Fitness since it's a fitness application and has nothing to do with phone numbers or zip codes and this would feel very misaligned with the goal of my software. However, after further Googling, it seems that this is the only available formatting option.

So, I went into Dig Deep Fitness and added "_zip" to my weight and reps input field. Luckily, my fitness software doesn't actually use the input field names (but rather their placement within the form) so the programming logic did not need to be updated. And, sure enough, the input fields now default to the iPhone's numeric keyboard! Aside from the fact that this is a really ganky fix, I am extremely pumped to have gotten to the bottom of this. I believe that this extremely small change in the user interface is going to have an extremely HUGE impact on the user experience.

I really don't like how the iPhone is handling this. Forcing the developer to include "phone" or "zip" in numeric input fields is going to lead to very poorly named form fields. Imagine having to write something like this:

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

Here, I want a numeric value, since I am talking dollars, but I have to put "zip" in the field name?? As a programmer who tries to follow best practices and aims for easy maintainability, this makes me cringe. I hope that in the future, the iPhone Safari browser will follow the WAP formatting standards which can be included in external style sheets.

Download Code Snippet ZIP File

Post Comment  |  Ask Ben  |  Permalink  |  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

That's crazy. Good to know, thanks!

That's definitely a bass-ackwards way of setting up numeric input. What about the EU people (as they're now getting their iPhones). If there is a web form with "zip" in it, they will get the numeric keypad, but UK zips have letters and numbers.

@Gareth,

I agree. I hope that's not the only way to do it! It's just the only way that I could find.

What happens when you dynamically change the name attribute of the form field with JavaScript? Does this change the default keyboard as well?

If this seriously interferes with usability, you could have JS change the form field names on page load, and then revert them right before page load. I'm not endorsing this approach, but it might be worth exploring.

Way to trailblaze developing web apps for iPhone, Ben! Might I suggest that you tag these posts with "iPhone"? I know if I ever have to optimize web apps for the iPhone, I'm making a bee-line right for this web site.

@David,

Call me crazy, but I don't think you can change form inputs dynamically at run time. I believe that I have tried to do that in the past (as part of a copy DOM node, then change name). I think browsers like to keep the form elements static. I haven't tried this in years, so maybe the technology changed.

You're crazy! Sorry, couldn't resist. :)

I just tried it (changing form field names with JS) and it worked just fine in FF2 and IE6.

This approach is still pretty kooky. But what I like about it is that you can develop your interface as you normally would, and then layer on the kooky behavior for iPhone users.

Explicitly supporting different code for different browsers is not ideal from a maintenance perspective, but at least you don't have to compromise your server-side logic or markup.

@David,

I am surprised that worked. I could *swear* that I've tried that in the past only to have it not work. Of course, I might be thinking about my Netscape 4 days (the scarring goes so deep).

Since this is primarily an iPhone driven piece of software, I don't have any qualms about putting in browser specific hacks. For now, though, I will just go with the _zip field naming as it gets the job done.

While the default numeric keypad is a nice feature, last night I was filling in an online form when I had to enter a phone number in the format of XXX-XXX-XXXX. Well guess what, no dash on the numeric keypad. I had to abort the entire entry because I could not submit the phone number without the dash.

@Matt,

That's a problem with horrible business logic. If you ever come across a site that forces you enter data in a particular format (other than, maybe dates), you are dealing with lazy-ass programmers.

Any programmer should be able to take data given by the user and format it on the server to suit the business requirements. I am sorry you had to deal with that. It's wicked lame.

Anyone know how to pop up the email keyboard which contains alpha plus @ and dot? Just like when using the email application. I've tried including "email" in the field name but no luck.

This feature seems to be gone with the 2.0 release of iPhone software. I can't get it to work on my test forms.

@Matt,

Oh man, that sucks! Maybe they are sticking to the mobile standards now?? I am planning to get a 3G iPhone soon. I'll let you know if I come up with anything.

I just updated my first-gen iphone last week and in trying to build my own app (and trying the Fandango zip picker form), I get a standard keyboard.

If you have a first gen iphone with the new 2.0 software, can you test it on your web app to see if it still works? It doesn't seem to for me.

@Matt,

I have gen 1 with earlier software. I am afraid to update after all the craziness I heard went on. As this is my only phone, I am gonna hold off on the upgrade until I get my new phone.

I have a first gen iPhone with the 2.0 software. I went to Fandango's iPhone site and went to the zip code box. It did NOT open the numeric keyboard, just the regular old alpha keyboard.

@Matt,

Just got a new phone yesterday and I am experiencing the same thing :( this is not good.

I think this was the site where I found the info on how to do the "numeric default trick", so when it "broke" with the iPhone 2.0 update, I found my way back here looking for a solution, and don't see anything in the comments. This is not good! I have a form with a lot of numeric input fields all in a row and defaulting to the numeric keypad made the form entry extremely easy. I hope I can find a solution soon!

It doesn't sound like any "solution" is around. It sounds more like it was broken with the 2.0 update. Will it be fixed in 2.1? No clue. I know everywhere I'm looking, the same people are complaining that this "broke" in 2.0. "broke" or "fixed"? I think broke ... you had to specifically program this option in for it to work.

Yeah, sort of disappointing, as it makes the web app I developed for entering statistics an extra chore. I used to just hit number - next - number - next - number - next - number - next and so on, DONE. Now I have to switch back to the number keypad for every single field.

I've been googling this when I get spare time and still can't find anything.

Has anyone has a workaround now ?

Not fixed in 2.1. I just checked....

Yeah...definitely not fixed. I was just using my web app this morning and I have to keep flipping to the numeric keypad for all my number fields. Too many extra key presses.

That is too frustrating!

Still not fixed in 2.2 - Gotta assume it isnt coming back... arg!

This guy actually wrote his own, doesnt register numbers real well if I am typing fast. But maybe this could be improved on?

http://www.dannyg.com/iphone/tipCalc/

Yeah, this is one of the first thing I checked with the 2.2 update - and it's not fixed. Probably very low on their to-do list as well. But still very annoying.

It should be a high priority; it's a huge usability issue :( selecting the appropriate keyboard makes a huge difference.

@Anthony,

Yeah, I've seen that before. Not sure how I feel about it just yet.

Guys,

It is definetively a bug. People from many iPhoneWebDev Lists are filling bug reports to Apple since 2.0 to solve this issue.
I'm currently on 2.2 and didn't find any way to make the numeric keypad to pop-up.
I have tryed many solutions, field names, css, wap-css, js, etc... There is no hidden methods to do it on the DOM... nothing...
I have re-read all documents from ADC on WebDev to iPhone, and there is nothing there... only a ol doc telling that the way is to add phone or zip on the field name... so.. if this is in the docs and it is not happening... gotta be a huge usability bug.

So here I come to ask all of you guys with this damn problem to fill lots of bug reports on this matter to Apple and hope for a solution on 2.3

For now... the solution is to make your own numeric keyboard using css and a bit of JS....

Also... I'm having problems with "fullscreen" mode on 2.2, can anyone comment on this matter too??

Cheers

@Ygor,

Thanks for the inside track. Do you have a link where one might be able to fill out a bug report?

So, have you found a way to default the keyboard to have the '.' and'@' when you're in a form field typing in your e-mail address?

putting_email in your fields name doesn't do it...

*scratches head*

@Dvo,

I still have not found a solution to this :(

@Ben,

Totally different question, but I thought maybe YOU would know...

Is there a way to differentiate between a homescreen launch of a webapp and the webapp just being accessed straight through safari?

I want to style an element based on if it's been launched as a full screen webapp from the homescreen, and style it differently if the user is just going to the URL straight through safari mobile...

Any thoughts?

@Dvo,

You can usually check the user-agent being passed by the browser. The iPhone browser will announce itself as the iPhone - so you know what browser it is.

@ Ben

I know I can query the user agent and display css based on that, but i'm looking to query whether an iPhone user is viewing the site as a webapp launched from the homescreen, or if they are viewing it by opening mobile safari and then typing in the URL...

Am I making sense?

Why not just have a different URL for the homescreen app vs. the landing page for the mobile app? www.myappleapp.com/index.cfm then www.myappleapp.com/index.cfm?fromHomeScreen=1 or www.myappleapp.com/fromHomeScreen.cfm You could even use a different URL if you can't set different landing pages www.myappleapphomescreen.com

@ Ben

hmmm...

Well, to get the homescreen webapp going, a user has to manually add it to the homescreen by going to the site in safari mobile and pressing the + icon and then "Add to Home Screen", right?

So, all i'm wanting to do is this:

1) when a user visits (from their iPhone) www.mydomain.com they are redirected to www.mydomain.com/iphone/ based on user agent detection.

2) Now, since they are viewing it through mobile safari at this point, I want the landing page to have a little note above the + icon telling them that the site is better run as a home screen web app and they should click it and add it to their home screen.

3) Now, it's just going to add www.mydomain.com/iphone/ to the home screen and launch it full screen as a web app from that icon.

4) Now, the little note telling the user to click the + icon will still be there in the homescreen web app version too...that's what I want to get rid of.

So, i'm not sure that the solution you mentioned will accomplish that, unless i'm ultra dense - which IS entirely possible after this many hours of not sleeping.

This is actually Gareth not Ben :)

Can you try using some JavaScript? Will that still get caught by the bookmark screen cap?

@Gareth

My bad.

Anyway, after much tinkering, I discovered a few things about the iPhone OS and Safari.

I tested setting a cookie in a page that had a div set to be hidden on the next visit if the user had accepted the cookie.

Then, I visited the page in mobile safari, the div displayed and then was hidden upon the next visit. Good deal.

My suspicion was that if I visited that same page through a home screen icon launch, the div would be hidden on that visit too, BUT - it wasn't.

This told me that the browser user agent was being recognized differently from a web site/page being launched from the homescreen versus it being launched directly in safari mobile.

So, I did some PHP echoing of the user agent in both cases, and I was right - when launching a webapp from a homescreen icon, the user agent goes unrecognized.

So, I wrote this little bit of PHP to display a message in the safari mobile view, but not in the homescreen launched view:

<?php
function agent($browser) {
$useragent = $_SERVER['HTTP_USER_AGENT'];
return strstr($useragent, $browser);
}
if(agent('Safari') != FALSE)
echo "Put a SAFARI ONLY message or HTML here...";
else
echo "Leave this blank for the webapp version or put a WEBAPP ONLY message or HTML here...";
?>

Hope this might help someone in the future!

--DVO

@Dvo,

I am surprised that the user agent is not reported if you launch the web page from the home screen. I can't imagine why it would do that, especially since this action just opens up a web browser.

If it's working for you, though, cool!

@ Ben

I was pretty surprised myself! All that tinkering and it was just THAT simple!

I can't imagine Apple having a reason to NOT report the agent from home screen launches...

Hmmm.....

Is this "feature" fixed now? Any updates?

@Teye,

As far as I know, this is still an issue. I double checked on iphone.fandango.com and it is still not working. I figure if Fandango hasn't figured it out, it's not fixed (or is that putting too much faith in a movie company).

Hey guys, Does anyone know if it would be possible to make a portrait keyboard layout like the blackberry that has the T9 input but for the iphone.(Seems this would make texting on the move a bit easier)

Hi guys,

I'm not a developer but I play one on TV. Not really, but I'm a hybrid anyhow.

Do any of the techniques here work? http://bemoko.com/wiki/Input_Mode

In particular, does inputmode work?
<input name="field" inputmode="digits"/>

@Barbara,

Unforutnately, none of those techniques seemed to make any difference on my iphone.

I've been doing a lot of iPhone web app development lately using HTML5 elements. I'd hoped that using <input type="number"> would trigger the numeric keyboard, but, alas, foiled again. This is on iPhone OS 3.

nope ! none of the techniques worked and i did try fandango.com as well :(

@Andrew,

Word up! This was such a good feature; not sure why they took two steps back. Maybe they are trying to force people into native app development :P

Any word on fixes yet? This is just killer!

@Nick,

Not that I have seen yet :(

This is shame that apple would take this out, especially since they put so many abilities into safari for web-app developers.

Guys, just go give feedback on iPhone at www.apple.com/feedback and maybe Apple takes some action on the issue. Apple reads every feedback message with care.

If they receive conplains from more people, they think this is something people want.

@Yoneh,

Thanks for the link - good idea.

I changed all my input fields type to number and it works:
<input type="number" name="" ....>
And surprise: iPhone Simulator doesn't show it right; instead publish your web-app and load it with your iPhone/iPod's Safari.
Mine is iPod Touch 1 gen./ 3.1.1 version of OS

@Dorinake,

Holy cow! You just cracked that egg my friend! I have also confirmed that this works. Rock on with your bad self!!

Does not work when I try it... Using software version 3.1, build version 7C144 (iphone).

@Ben & @dorinake,

Guess what - changing the input type to "email" also defaults the keyboard to the e-mail keyboard!

Thank you dorinake for "cracking the egg" and to you Ben, for providing a place to share the cracking!

Hurrah!

@DVO,

Look like using type="url" also works (add ".com" instead of space bar).

@Teye,

I just updated my iPhone yesterday, so perhaps it's in the very latest build?

Well, I just updated my iPhone before I posted the previous post. Could you try a page for me?

http://www.justcalcit.com/worldwar/index

There you will see a some input fields (level, friends and behind all the buildings). These all have type="number" now, but it still show's the default keyboard.

Am I doing something wrong?

@Teye,

Yes, the first input on your page comes up as the numeric keyboard for me. Hmmm, I wonder why we would have any difference if we both updated the phones recently??

@Teye

To confirm, your app also shows numeric on my iphone which is also updated.

Could there possibly be firmware update variations in different countries?

Hmmm...

Well, if you say that you see a numeric keyboard, then I am happy!

I really don't know why I am still seeing the old keyboard...

I tried to remove cache etc. but it makes no difference...

I was so excited about this, I had to write an updated blog post:

http://www.bennadel.com/blog/1721-Default-To-The-Numeric-Email-And-URL-Keyboards-On-The-iPhone.htm

Ok, my bad guys.. it works now. :-)

I need more coffee

I was waiting for a number input keyboard with only digits, something like used on this site: http://www.dannyg.com/iphone/tipCalc/.

So, it DOES work, also on my iPhone.

@Teye,

No worries my man :)

Post Comment  |  Ask Ben

Post A Comment

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.