Decimal Point iPhone Web App Number

Question

I am trying to find an answer for this. I learned how to make the keyboard appear in a web application using the pattern string [0-9] *, but it just shows numbers without a decimal number!

Has anyone got a solution please? :)

Thanks!

Answer 1

The numeric keypad with decimal input was available only for native applications in iOS 4.1 (in particular, for the UIKeyboardTypeDecimalPad keyboard UITextInputTraits protocol UITextInputTraits ). Previously, you had to hack to bypass the missing decimal point limit using UIKeyboardTypeNumberPad as a starting point.

Unfortunately, this function does not yet seem to be leaking to MobileSafari (or UIWebView) and Apple, only the documentation for the function is here , unfortunately, only those documents that you have already found.

There is no mention in the Apple documentation that you can specify <input type="number"> (the new attribute value in HTML5), which will launch the user on the keyboard of numbers and punctuation marks, which is usually accessed by pressing the ".? 123 "button at the bottom left of the default text keyboard.

I will probably take this approach now and hope that support for UIKeyboardTypeDecimalPad will be added in iOS 5.

(By the way, input elements with a type attribute set to number must support floating point numbers , as in the HTML5 specification . I suspect that is why Apple presents a full keyboard in this case - floating point numbers may legally contain characters minus and plus and lowercase or uppercase 'E, none of which are supported with UIKeyboardTypeDecimalPad )

Answer 2

The problem with <input type="number"> is that it will only be excluding integers. I found this where it mentions adding step="any" to the input tag. Now you get a numeric keypad and can enter decimal places.

Answer 3

Checkout inputmode="decimal" attribute, starting with iOS 12.2

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

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