iPhone Web App Number Pad with Decimal

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 sho开发者_高级运维ws the digits without a decimal!

Anyone got a solution please? :)

Thanks!

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)

Problem with <input type="number"> is that is will only except integers. I found this where he mentions adding step="any" to the input tag. Now you get the numeric keypad and can enter decimals.

Checkout inputmode="decimal" attribute starting of iOS 12.2

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

https://caniuse.com/#feat=input-inputmode