Localization of input type number

Asked 16/11, 2012 at 7:29 Answered 26/5, 2021 at 14:15

I work on a web application running in Chrome, where I have inputs with type number. In my locale commas are used for decimal numbers and a space is used for thousand separation (not that important), but when I enter these characters into a number field, they are simply removed, effectively increasing money amounts by a hundred.

I have set the language both in the browser settings and on the page, but I still need to use a period for decimals. Is there any way I can configure the field to accept commas?

Alternatively, I'll have to solve this using javascript. I guess I could handle the keydown event and change commas to periods as the user types, but that wouldn't give a great user experience, would it? So how can I acheive this with a minimal footprint in my code?

Piracy answered 16/11, 2012 at 7:29 Comment(7)

Do you absolutely want to keep the arrows up and down ? – Anear 16/11, 2012 at 7:54

That's not the issue. Besides, I have removed the arrows using CSS. – Adley 16/11, 2012 at 7:58

Then I don't think you should use an <input type="number">, use an <input type="text" pattern=""> – Anear 16/11, 2012 at 8:12

I guess that's a solution, but I really think this is something the browser vendors should support. – Adley 16/11, 2012 at 9:34

Still a problem in 2019! – Ingenious 15/2, 2019 at 11:16

Still a problem in almost 2022! :) – Joost 28/12, 2021 at 12:29

2022 and still a problem – Parturition 25/3, 2022 at 15:32

The HTML5 input type=number is inadequate from the localization point of view, due to both the definition and the implementations. It is meant to be localized but as per the locale of the browser, which you cannot set or even know as a designer/author.

On my Chrome, the input type=number step=0.001 accepts 1,2 (with comma) and sends it as 1.2 and it accepts 1.200 (with a period), visibly converting it to 1200 and sending as such. This is how things are meant to be, more or less, when the browser locale is Finnish. But it fails to accept 1 200 (which is standard way of writing 1200 in Finnish) and instead sends just the digit 1.

So it’s rather hopeless. Use whatever JavaScript widgets you can find, or a simple text input box. Anything is probably better than input type=number unless all users use browsers with the same locale and have the same expectations on the format of numbers.

Darbee answered 16/11, 2012 at 12:9 Comment(0)

If you don't need the up/down ticks, than follow workaround can help:

for comma (,) only (like german syntax):

<input type="text" pattern="[0-9]+([,][0-9]{1,2})?" name="amount">

dot (.) only:

<input type="text" pattern="[0-9]+([\.][0-9]{1,2})?" name="amount">

both but don't together: (no 1000 seperator)

<input type="text" pattern="[0-9]+([\.|,][0-9]{1,2})?" name="amount">

otherwise number for German/Deutsch:

<input name="myinput" value="0" step="0.01" lang="de-DE" type="number">

and style it with:

input[type=number] {
    -moz-appearance:textfield;
    -webkit-appearance: none;
    appearance: textfield;
}

Also lang "global" attribute can change behavior (thx @florian) of all input elements without own lang attribute:

<html lang="en">

See:

List of valid lang values: https://github.com/libyal/libfwnt/wiki/Language-Code-identifiers

Dukie answered 6/10, 2015 at 14:21 Comment(7)

Please also consider that on mobile devices the control for input type="number" may look different (number keyboard) and you won't get that extra control for type="text". Also see blog.pamelafox.org/2012/05/… – Ingenious 18/3, 2016 at 10:18

I'm in the same situation as the OP and I personally found that the attribute in Frank's answer: lang="de-DE" (or another culture) was exactly what I needed. Frank's answer here should have more upvotes as its a working solution and very simple. – Chasseur 7/1, 2017 at 0:58

German comma only is look like ok but.. how you post? because posted value should be culture specific. – Fallfish 10/7, 2018 at 20:56

Also upvote because of the lang-attribute - i also had the problem that i couldn't directly set the attribute on the input field... it also works when you set the lang-attribute on the html-tag – Illegality 23/3, 2021 at 14:57

my browser(chrome) language is set to English but I would like to display float numbers in textinput in German number format. I have tried to add attribute lang="de-DE" in input and HTML tags but doesn't work properly. – Nautilus 20/5, 2021 at 8:8

The "lang" attribute doesn't work at all on Chromium based browsers – Scheffler 23/5, 2021 at 9:19

The "lang" attribute does work on Chromium 114 for me. I get transparently de-DE formatted numbers ("," as decimal separator) – Lateshalatest 27/6, 2023 at 21:34

The spec is clear: only a period is allowed as the decimal separator. Its up to the browsers to provide localization support for forms. Thousand separators are not allowed.

Christcross answered 24/2, 2015 at 20:16 Comment(3)

Nice blog post :) I see that it has been some development in this area since I posted the question. – Adley 25/2, 2015 at 6:30

This one is nice as well: codepen.io/aminimalanimal/full/bdOzRG – Tanatanach 30/3, 2020 at 15:49

Localization is indeed interesting. I have set my <input> to have lang="de-DE". When I enter 1,2 into the input field, I get the following results: .value is "1.2", so it is a string, but the decimal separator has been un-localized. valueAsNumber is 1.2, so a correct number. But there is no way to access the raw 1,2 as a string, as asked in the initial question. – Lateshalatest 27/6, 2023 at 21:50

Unfortunately these characters are not allowed in the <input type="number">

See the specs here : http://w3c.github.io/html-reference/datatypes.html#common.data.float-def

Is this the format you want ? http://jsfiddle.net/S8rqY/

Anear answered 16/11, 2012 at 7:44 Comment(6)

Sort of, though I'll need to change the pattern to -?\d+(|,\d{2})? to include negative numbers :) – Adley 16/11, 2012 at 9:44

No worries, hope that helped. – Anear 16/11, 2012 at 10:52

Decimal separators are accepted if the attributes of the tag allow numbers other than integers, e.g. <input type="number" step="0.1">. – Darbee 16/11, 2012 at 12:10

Yes you're right, like you explained very well in your answer, the allowed characters will depend on the locale of the browser, and the decimal separators, or thousand separators will change accordingly. – Anear 16/11, 2012 at 12:17

@Piracy Be strict and avoid pipe character. Also, you should allow a single digit too. -?\d+(,\d{1,2})? – Junket 23/2, 2017 at 2:50

@wakooka, Please update that link to w3.org. It responds with 404 (Not Found). – Dexamethasone 10/8, 2017 at 15:22

While Chrome uses the Browser setting, Firefox doesn't. At least not always - e.g. when there is a lang attribute in the <html> tag, Firefox uses this.

However, you can pass the lang attribute also to the <input> tag directly. Combining this with the Navigator API can simulate Chromes Behaviour.

Minimum example in React:

<input
  type="number"
  lang={navigator.language}
/>

Scandalmonger answered 26/5, 2021 at 14:15 Comment(0)

Recommended topics

Hot tags