Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at cf.Objective() 2014 (Bloomington, MN) with:

Defaulting To The Numeric Keyboard On The iPhone

By Ben Nadel on

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:

  • <span class="font1">Enter ZIP code:</span>
  •  
  • <form action="index.jsp" method="post">
  •  
  • <div class="bbox">
  • <table class="font1">
  • <tr>
  • <td>
  • ZIP Code:
  • </td>
  • <td>
  • <input
  • class="phone"
  • type="text"
  • size="10"
  • name="zipl"
  • value=""
  • />
  • </td>
  • </tr>
  • <tr>
  • <td colspan="2">
  • <input type="hidden" name="mk" value="null"/>
  • <input type="image" src="/M/NS40P/btn_sub.gif"/>
  • </td>
  • </tr>
  • </table>
  • </div>
  •  
  • </form>

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:

  • $ <input type="text" name="price_zip" />

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.




Reader Comments

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.

Reply to this Comment

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.

Reply to this Comment

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

Reply to this Comment

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.

Reply to this Comment

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

Reply to this Comment

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.

Reply to this Comment

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

Reply to this Comment

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.

Reply to this Comment

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

Reply to this Comment

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.

Reply to this Comment

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

Reply to this Comment

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.

Reply to this Comment

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!

Reply to this Comment

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.

Reply to this Comment

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.

Reply to this Comment

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.

Reply to this Comment

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.

Reply to this Comment

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

Reply to this Comment

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

Reply to this Comment

@Ygor,

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

Reply to this Comment

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*

Reply to this Comment

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

Reply to this Comment

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

Reply to this Comment

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

Reply to this Comment

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

Reply to this Comment

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

Reply to this Comment

This is actually Gareth not Ben :)

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

Reply to this Comment

@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

Reply to this Comment

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

Reply to this Comment

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

Reply to this Comment

@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).

Reply to this Comment

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)

Reply to this Comment

@Barbara,

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

Reply to this Comment

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.

Reply to this Comment

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

Reply to this Comment

@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

Reply to this Comment

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

Reply to this Comment

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.

Reply to this Comment

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

Reply to this Comment

@Dorinake,

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

Reply to this Comment

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

Reply to this Comment

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

Reply to this Comment

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

Reply to this Comment

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?

Reply to this Comment

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

Reply to this Comment

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

Reply to this Comment

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

Reply to this Comment

Hey Ben,

I came here looking for something else (I want to remove the forced "Shift" action for my inputs), but I found myself reading this entire threaded with bated anticipation if the fix was found at the end! It was like watching a suspense movie.

Anyways, it might be cool to move the link to the new fix to the top of this blog post (or bottom) so people (and google) could find it easier!

Cheers,
-Henry

Reply to this Comment

@Henry,

Ha ha, I liked your description. Yeah, moving the link to the top of the page is probably a good idea. I will do that.

Reply to this Comment

Sir,

I didn't understood waht are you discussing here. but i am here to search the answer for 'how to restrict user to input numbers only in specific textfield in my iPhone App & i got the answer. iPhone is having the property to allow which type of editor you want to allow to the specific textfied in IB." thanks. if i am diverting from the topic then please forgive my mistake.

mahesh

Reply to this Comment

@Mahesh,

You can have the iPhone present the "numeric" keyboard if you use type="number"; but, I am not sure that that will restrict numbers only. You might have to add some Javascript to filter the input or create some sort of mask.

Reply to this Comment

Found via the horse's mouth, here's how apple is saying we should do it now...

http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/index.html#GENERAL-CONTROL_WHICH_KEYBOARD_IS_DISPLAYED_WHEN_A_USER_TOUCHES_A_TEXT_FIELD

How do I control which keyboard is displayed when a user touches a text field?

You can control which type of keyboard is displayed when a user touches a text field in a web page. To display a telephone keypad, an email keyboard, or a URL keyboard, use the tel, email, or url keywords for the type attribute on an input element, respectively. To display a numeric keyboard, set the value of the pattern attribute to "[0-9]*" or "\d*".

These keywords and the pattern attribute are part of HTML 5, and are available in iPhone OS 3.1 and later. See Listing 15 to see how to display each type of keyboard, including the standard keyboard.
Listing 15: Controlling keyboard display

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

Guess they heard our cries :)

Reply to this Comment

Chad, thanks for posting that info. Finally, almost two years later, I get to have nice big number buttons for all my numeric text fields. That 'pattern="[0-9]*"' is even better than what I had going on before this broke so long ago.

Reply to this Comment

glad to finally see a solution to this. Anyone know of a way to get a keyboard on the iPhone that shows a period so you can do calculations with the numeric keyboard? The zip and the pattern ones lack the ability to do decimals. If no on that... What about pulling up the standard keyboard and instantly going to the numeric/symbol?

Reply to this Comment

@Jared,

Have you tried the numeric keypad? I believe the numeric one should have periods in it as well as other punctuation.

Reply to this Comment

why dont you just change the input 'type' from 'text' to 'number'??

so instead of:
<input type="text" ...

you'd have:
<input type="number" ...

worked for me

Reply to this Comment

@Drookue, @Jack,

At the time of this writing (2 years ago), the mobile Safari did not yet support those values. They now do and it is awesome!

Reply to this Comment

Thanks a lot Ben! We got the "Numbers and Punctuation" keypad using input type=number.

On other thoughts can we do something like this:
<!-- display a numeric keyboard with decimal-->
<input type="text" pattern="[0-9.]*" />

Reply to this Comment

Thank you! This really helped. I have a small business that develops iPhone, iPad, and iPod touch apps, as well as websites, and Winterboard themes. I am building a section of the web site where developers can log into with their pins. For the desktop site I used an iframe appear on the log on page in the center of the screen using css. In that iframe I developed a keypad almost identically to the iPhone's. But there was a problem with the iPhone version and there inability to handle frames correctly. So I created a text field and button that looked native to the iPhone and used <input id="pin" value="" placeholder="Enter Pin" type="tel">which would have the keypad appear. Once again I thank all of you!

Reply to this Comment

Watch out for iOS 5.

There is a strict usage of the 'numeric' type so that even if the numeric keyboard is displayed, any non-numeric characters will be removed. For example, a field with '7/13' and type="numeric", will on losing focus result in '7'.

I'm looking for a way to have the numeric keypad and 'enter' non-numeric characters that don't get scrubbed.

Reply to this Comment

@Nikolas,

Glad you got that working!

@David,

Ooooh, that's kind of super lame! I don't think I care for the "validation" side of things. I just want the special keyboard, not the restriction on the input characters. Grr. I wonder if there is going to be a workaround for this.

Reply to this Comment

@David,

I have tested it out on iOS 5, it's works fine for what I need it for. But i wish you could disable certain letters.

Reply to this Comment

I'm sure this has since been mentioned in the comments above. All you need to do is use the following:

<input type="tel" />

type="tel" is a HTML5 attribute, so it won't validate if you are using a different doctype.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
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.