Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 input box with type="number" does not accept comma in Chrome browser

Tags:

I am using a HTML5 input box with type="number". Regarding to some documentations, it should be possible to enter a number with comma (not with period) if I also use the lang="" attribute. It is working in Firefox, but not in Chrome (does not accept a comma). How can I get Chrome to accept the comma in the input box. My problem is that our German users expect that they can enter a comma instead of a period there.

https://jsfiddle.net/byte2702/y3Lpfw7m/

Please enter a number with comma: <br/> <input id="num" type="number" step="any" lang="de" pattern="-?[0-9]+[\,.]*[0-9]+" />  
like image 378
Jana Weschenfelder Avatar asked Feb 10 '16 12:02

Jana Weschenfelder


People also ask

How do you not allow input type numbers?

If you are able/allowed to use jQuery, you can disable keypress on the type='number' . $("[type='number']"). keypress(function (evt) { evt. preventDefault(); });

Does input type text allow numbers?

By default, HTML 5 input field has attribute type=”number” that is used to get input in numeric format. Now forcing input field type=”text” to accept numeric values only by using Javascript or jQuery. You can also set type=”tel” attribute in the input field that will popup numeric keyboard on mobile devices.

Which type of input control can be used to accept only numbers in a form HTML?

Using <input type="number"> The standard solution to restrict a user to enter only numeric values is to use <input> elements of type number.


2 Answers

actually, if i read the documentation correctly, pattern is not supported for type=number. hence, stick to type=text and then add pattern="..." for the front end validation. in the next step, you will then need to convert the text input into a real number if it wasn't compatible to JavaScript/computing format.

2017 and still no good solution for this common problem...

like image 99
Jörn Berkefeld Avatar answered Oct 04 '22 11:10

Jörn Berkefeld


As of now (30/08/2017), Antoine Thiry's answer seems to be no longer valid in Chrome (my version is 60.0.3112.113). Unfortunately I don't have any other suggestion, other than simulating type="number" with javascript.

like image 23
Ogier Avatar answered Oct 04 '22 12:10

Ogier