Defaulting To The Numeric Keyboard On The iPhone
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.
Want to use code from this post? Check out the license.
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:
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 :)
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
Thanks for all your work, everyone...I'll be using this!
@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.
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
@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.
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 :)
@Chad,
Heck yeah :)
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.
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?
@Jared,
Have you tried the numeric keypad? I believe the numeric one should have periods in it as well as other punctuation.
Thanks for the pointer Chad! Finally I can turn off auto-capitalization in my URL entry field.
Yeah... tried that. No punctuation unless I'm totally missing something obvious.
@Jared,
Hmm, maybe it's the version of the iPhone OS you are running. It works fine for me.
Actually you can just use HTML 5.
INPUT
type=tel
type=number
type=email
type=url
http://dev.w3.org/html5/markup/input.html#input
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
@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!
Do we have the decimal point in the numeric keypad?
If not how do we display a numeric keypad with decimal?
input type="number" - it works!!!
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.]*" />
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!
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.
@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.
@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.
heres a link i found
http://developer.apple.com/library/ios/#documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html
skip to the Configuring the Keyboard for Web Views part, it uses html5 form elements, each with a different keyboard layout works in iOS 3.1+
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.