Skip to main content
Ben Nadel at cf.Objective() 2017 (Washington, D.C.) with: James Brooks
Ben Nadel at cf.Objective() 2017 (Washington, D.C.) with: James Brooks

Defaulting To The Numeric Keyboard On The iPhone

By
Published in , — Comments (90)

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.

Short link: https://bennadel.com/1197

Reader Comments

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

21 Comments

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.

15,902 Comments

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

21 Comments

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.

15,902 Comments

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

2 Comments

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.

15,902 Comments

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

1 Comments

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.

15,902 Comments

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

2 Comments

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.

15,902 Comments

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

2 Comments

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.

5 Comments

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!

1 Comments

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.

5 Comments

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.

5 Comments

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.

5 Comments

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.

2 Comments

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

6 Comments

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*

6 Comments

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

15,902 Comments

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

6 Comments

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

111 Comments

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

6 Comments

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

6 Comments

@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

15,902 Comments

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

6 Comments

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

15,902 Comments

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

1 Comments

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)

1 Comments

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.

15,902 Comments

@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

1 Comments

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

1 Comments

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.

2 Comments

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

15,902 Comments

@Dorinake,

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

2 Comments

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

15,902 Comments

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

5 Comments

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?

15,902 Comments

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

2 Comments

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

5 Comments

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

1 Comments

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

15,902 Comments

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

1 Comments

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

15,902 Comments

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

1 Comments

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

5 Comments

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.

2 Comments

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?

15,902 Comments

@Jared,

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

1 Comments

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

15,902 Comments

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

2 Comments

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.]*" />

1 Comments

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!

1 Comments

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.

15,902 Comments

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

1 Comments

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.

Oh my chickens, this post is old!
I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
— Ben Nadel