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

Question

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

Fourthclass

I think this depends on the client local configuration. Firefox is good with this, but Chrome simply doesn't admit it. The workaround can be detect when blur or submit occurs and then replace the dot with a comma with javascript. – Risorgimento

Here in Brazil we use commas too. You can use a simple text input and do some Javascript stuff with it. For example you can create two buttons just to simulate the functioning of the number input. – Concretize

I will try it. Many thanks to you both. I had already the type="text" in mind, but I wanted to try type="number" first. – Fourthclass

When "simulating the number input" you are neglecting all the mobile users who would see a number keyboard on a type="number" input field. Ref: https://mcmap.net/q/194975/-how-to-force-keyboard-with-numbers-in-mobile-website-in-android/1066234 – Underpinning

We could solve the problem with var newValue = value.replace(/,/g,"."); back then. It is working fine on desktop computers and also mobile devices. Our customer has millions of website visitors, many of them use mobile devices. Nobody complained yet. We also made extensive tests on Android and iOS devices by ourselves. – Fourthclass

Shouldn't we report this as a Chrome bug on the developers' site? input should always accept period and comma. -- Update, submitted: bugs.chromium.org/p/chromium/issues/detail?id=793673 – Underpinning

Answer 1

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.

Preordain

Yes. That's what we had done back then, too. We used jQuery/JavaScript to solve the problem. – Fourthclass

After trying it all, that seems to be the only way that works in Chrome. – Pontius

While this answer does provide a suggestion on how to solve the problem, half of the answer is a reference to some other answer (by Antoine Thiry) which I cannot find any trace of. Something was probably deleted or someone's name changed, but I do think this "dangling pointer" is annoying... – Arber

Answer 2

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

Milligram

Mobile users get a number input when they click on the input. if you change this to text this is no longer the case. This isn't good. – Curule

actually, the question is targeting desktop browsers if i am not mistaken. for mobile browsers the described issue does not exist as the mobile OS takes care of proper decimal separators anyways. Hence if you, @MartinDawson want to target both systems and have users from all over the world, you will have to generate your input with varying types depending on the browser for the perfect experience. – Carothers

We had solved the problem with text input and JavaScript back then. See the comments section below my question, especially the answers of Phiter and my last answer there. The solution works in desktop web browsers and also mobile webbrowsers. – Fourthclass

2019 and still no good solution for this problem. Seems like this would almost be something CSS3 should have... – Illiberal

Answer 3

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.

Limner

Unfortunately this doesn't work for me in Chrome 68 with the en-US locale: I can use period as a decimal separator, but comma does not work. – Leet

Just tested it in Chrome 68.0.3440.75 Built on Ubuntu , running on Ubuntu 16.04 and Firefox, and I can write 0.5 or 0,5, or .5, or ,5 and use it in javascript calculations or in php script. But I am use just en, not en-US – Limner

Sorry, my original comment was unclear. I did use lang="en" in the HTML, it was Chrome that I had configured to be in the en-US locale. Setup an example at jpm5omvnl5.codesandbox.io : I can't write 0,5 but I can write 0.5. In the request, my Chrome sends accept-language: fi-FI,fi;q=0.9,en-US;q=0.8,en;q=0.7 (the underlying OS is in fi-FI, looks like Chrome includes it despite Chrome configuration). Chrome version is 68.0.3440.106 (Official Build) (64-bit), OS is Windows 10 Pro. Could be a OS/locale setting difference? – Leet

Stumbled into Daniel Aleksandersen's blog post HTML5 number inputs – Comma and period as decimal marks, which has a table analyzing input type="number" behavior with different lang combinations in html and in the input. Based on the table, browsers seem to respond differently to these; some allow both comma and period, others don't. – Leet

Yes, I had cases, when I saw small differences between same browsers in Windows and Linux. Also sometime doctype has affect. I saw this post, I had tried en-150 and it was not worked for me. To ensure, what it's not work for you, make small test HTML like next – Limner

<!DOCTYPE html> <html lang="en"> <head> </head> <body> <form> <input step="0.01" value="" onchange="calc_sum(this)" onkeyup="calc_sum(this)" type="number"> <span id="sum">0</span> </form> <script> function calc_sum(a){ document.getElementById('sum').innerHTML = parseFloat(document.getElementById('sum').innerHTML) + a.value*1; } </script> </body> </html> – Limner

Answer 4

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

Spindlelegs

Answer 5

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

Outpour

Hello Mohimanul Islam, in our case there was a C# ASP.NET WebApp behind, PHP was not applicable for us. In other words, I need a client-side script, not a server-side script. Maybe it was not fully clear from the question. – Fourthclass