How to handle floats and decimal separators with html5 input type number

Question

Im building web app which is mainly for mobile browsers. Im using input fields with number type, so (most) mobile browsers invokes only number keyboard for better user exper

Answer 1

I have not found a perfect solution but the best I could do was to use type="tel" and disable html5 validation (formnovalidate):

If the user puts in a comma it will output with the comma in every modern browser i tried (latest FF, IE, edge, opera, chrome, safari desktop, android chrome).

The main problem is:

• Mobile users will see their phone keyboard which may be different than the number keyboard.
• Even worse the phone keyboard may not even have a key for a comma.

For my use case I only had to:

• Display the initial value with a comma (firefox strips it out for type=number)
• Not fail html5 validation (if there is a comma)
• Have the field read exactly as input (with a possible comma)

If you have a similar requirement this should work for you.

Note: I did not like the support of the pattern attribute. The formnovalidate seems to work much better.