Localization of input type number
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.
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:
- https://html.spec.whatwg.org/multipage/dom.html#language
- https://html.spec.whatwg.org/multipage/dom.html#attr-lang
List of valid lang values: https://github.com/libyal/libfwnt/wiki/Language-Code-identifiers
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.
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/