Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iPhone UIWebview: How to force a numeric keyboard? Is it possible?

I'm experimenting with PhoneGap to develop some iPhone apps. PhoneGap basically wraps a UIWebView - it works well. The problem is the my app has several input fields that only take numeric input. I really need to force the numeric keypad instead of accepting the default standard keyboard, which then forces the user to switch to the numeric on every field. Does anyone know if this is possible? How?

Clarification: I know that Apple doesn't currently provide any API to allow this. I'm wondering if creating a custom class that inherited from UIWebView might help, or maybe creating a custom keyboard would open up some possibilities?

Update 6 Nov, 2009 - As noted below, Apple has recently updated safari functionality so that this is, once again, supported. So the accepted answer was changed to reflect that.

 <html> <input type='tel'/> <input type='number'/> <input type='email'/> <input /> </html> 
like image 303
JJ Rohrer Avatar asked Apr 21 '09 18:04

JJ Rohrer


People also ask

How do I get the numeric keyboard on my iPhone?

If a keyboard isn't already visible, tap the Show Keyboard button , then tap the Formula Keyboard button to begin editing a formula. To quickly enter a number or symbol on an iPad, drag down on a key and then lift your finger, or switch to the numeric keyboard on iPhone.


2 Answers

It looks like Mobile Safari supports the new HTML5 input type attributes of email, number, search, tel, and url. These will switch the keyboard that is displayed. See the type attribute.

So for example, you could do this:

<input type="number" /> 

And when the input box has focus, the number keyboard is shown (as if the user had the full keyboard and hit the "123" button.

If you really only want numbers, you could specify:

<input type="tel" /> 

And then the user would get the phone number dialing keypad.

I know this works with Mobile Safari -- I only assume it will work with UIWebView.

like image 80
Chris Huseman Avatar answered Sep 28 '22 18:09

Chris Huseman


I found a better solution is to use <input type="text" pattern="[0-9]*"> when designing forms for both mobile and desktop browsers.

like image 32
jon__o Avatar answered Sep 28 '22 18:09

jon__o