26

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]+" />
VLAZ
  • 26,331
  • 9
  • 49
  • 67
Jana Weschenfelder
  • 840
  • 2
  • 8
  • 23
  • 1
    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. – Marcos Pérez Gude Feb 10 '16 at 12:25
  • 1
    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. – Phiter Feb 10 '16 at 12:28
  • 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. – Jana Weschenfelder Feb 10 '16 at 12:33
  • 3
    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://stackoverflow.com/q/3372380/1066234 – Avatar Sep 25 '17 at 09:10
  • 2
    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. – Jana Weschenfelder Sep 25 '17 at 16:14
  • 2
    Shouldn't we report this as **a Chrome bug** on the developers' site? `input` should always accept period and comma. -- Update, submitted: https://bugs.chromium.org/p/chromium/issues/detail?id=793673 – Avatar Dec 10 '17 at 18:58

5 Answers5

12

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

Jörn Berkefeld
  • 2,540
  • 20
  • 31
  • 13
    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. – Martin Dawson Jan 04 '18 at 14:45
  • 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. – Jörn Berkefeld May 03 '18 at 12:57
  • 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. – Jana Weschenfelder Aug 09 '18 at 15:55
  • 1
    2019 and still no good solution for this problem. Seems like this would almost be something CSS3 should have... – OG Sean Jul 21 '19 at 20:56
3

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.

Ogier
  • 150
  • 9
  • Yes. That's what we had done back then, too. We used jQuery/JavaScript to solve the problem. – Jana Weschenfelder Sep 06 '17 at 08:30
  • After trying it all, that seems to be the only way that works in Chrome. – lukas_o Oct 05 '18 at 12:18
  • 1
    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... – Jasper Jan 04 '19 at 14:12
0

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.

Sergey S
  • 68
  • 8
  • 1
    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. – Lauri Harpf Aug 08 '18 at 11:49
  • 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 – Sergey S Aug 15 '18 at 19:18
  • 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 https://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? – Lauri Harpf Aug 16 '18 at 06:19
  • Stumbled into Daniel Aleksandersen's blog post [HTML5 number inputs – Comma and period as decimal marks](https://www.ctrl.blog/entry/html5-input-number-localization), 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. – Lauri Harpf Aug 17 '18 at 06:40
  • 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 – Sergey S Aug 17 '18 at 13:01
  • `
    0
    `     – Sergey S Aug 17 '18 at 13:01
0

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">
Hedeshy
  • 1,266
  • 2
  • 15
  • 24
-2

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

Marco
  • 2,368
  • 6
  • 22
  • 48
Mohimanul Islam
  • 1
  • 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. – Jana Weschenfelder Mar 02 '22 at 09:52