CODEWITHSUNDEEP
htmlinputnumbers
Jana Weschenfelder
Jana Weschenfelder

Reputation: 860

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

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]+" />

Upvotes: 27

Views: 45668

Answers (5)

Mohimanul Islam
Mohimanul Islam

Reputation: 1

I found an easier method to solve it

<html lang="de">

and printing the value please use php function

number_format(number,5,',','.');

https://www.php.net/manual/en/function.number-format.php

Upvotes: -2

Hedeshy
Hedeshy

Reputation: 1386

The HTML5 input field of type="number" is intended to adapt to local settings, known as localization. This means its behavior, such as formatting numbers, depends on the locale settings of the browser. However, this presents a limitation because you cannot manually adjust these locale settings for this specific element, nor is it possible to determine what locale the browser is set to.

You can use inputmode="numeric" along with a pattern attribute that limits the characters to numbers and associated characters instead of using type="number". This will allow you to accept numbers in any format.

<input type="text" pattern="[0-9]+([\.,][0-9]+)?" inputmode="numeric">

Upvotes: 0

Sergey S
Sergey S

Reputation: 68

As for now, I have tried

    <html lang="en">

or

    <input type="number" lang="en">

and it let me to input any: comma or period. I have tested it on desktop Ubuntu and mobile Android in Firefox and Chrome.

Upvotes: 0

J&#246;rn Berkefeld
J&#246;rn Berkefeld

Reputation: 2579

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...

Upvotes: 13

Ogier
Ogier

Reputation: 150

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.

Upvotes: 3

Related Questions