Menu
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?
300
The <input type="number"> defines a field for entering a number. Use the following attributes to specify restrictions: max - specifies the maximum value allowed.
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the attributes below. Tip: Always add the <label> tag for best accessibility practices!
The HTML <input> tag is used to get user input in HTML. To give a limit to the input field, use the min and max attributes, which is to specify a maximum and minimum value for an input field respectively. To limit the number of characters, use the maxlength attribute.
HTML input number type allows "e/E" because "e" stands for exponential which is a numeric symbol. Example 200000 can also be written as 2e5.
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.
132
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
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
