iPhone Web App Number Pad with Decimal

Question

Im struggling to find an answer for this one. I've found out how to make the keypad appear on a web app using the pattern string [0-9]* but that just shows the digits without a decimal!

Anyone got a solution please? :)

Thanks!

Answer 1

The numeric keyboard with decimal input was only made available to native apps in iOS 4.1 (specifically the UIKeyboardTypeDecimalPad keyboard type in the UITextInputTraits protocol). Previously, it was necessary to hack around the limitation of the missing decimal point using the UIKeyboardTypeNumberPad as a starting point.

Unfortunately, this functionality doesn't yet seem to have percolated through to MobileSafari (or UIWebView) and Apple's only documentation on the feature is here, which unfortunately only documents what you've already discovered.

One thing that the Apple documentation doesn't mention is that you can specify <input type="number"> (a new attribute value in HTML5), which will start the user on the number and punctuation keyboard that's normally accessed by pressing the ".?123" button to the bottom left of the default text keyboard.

I'd probably take this approach for now and hope that support for UIKeyboardTypeDecimalPad is somehow added in iOS 5.

(Incidentally, input elements with their type attribute set to number are supposed to support floating point numbers, as per the HTML5 spec. I suspect this is why Apple presents the full keyboard in this case - floating point numbers can legitimately contain minus and plus signs and lower case or upper case 'E's, none of which are supported with UIKeyboardTypeDecimalPad)