Defaulting To The Numeric Keyboard On The iPhone
Posted April 14, 2008 at 8:56 AM
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 »
- <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:
Launch code in new window » Download code as text file »
- $ <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.
Download Code Snippet ZIP File
Comments (7) | Post Comment | Ask Ben | Permalink | Other Searches | Print Page
A Reminder About Interfaces And The User Experience
I'm Not Dead Yet - But Blogging Might Be Killing Me?
Reader Comments
That's crazy. Good to know, thanks!
Posted by Rex on Apr 14, 2008 at 9:33 AM
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.
Posted by Gareth on Apr 14, 2008 at 11:27 AM
@Gareth,
I agree. I hope that's not the only way to do it! It's just the only way that I could find.
Posted by Ben Nadel on Apr 14, 2008 at 12:08 PM
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.
Posted by David Stamm on Apr 14, 2008 at 4:31 PM
@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.
Posted by Ben Nadel on Apr 15, 2008 at 7:47 AM
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.
Posted by David Stamm on Apr 15, 2008 at 8:24 AM
@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.
Posted by Ben Nadel on Apr 15, 2008 at 8:33 AM
