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?
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/
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}
/>
Related
My question is for input tags and when the type is a number
Say I had a number
French
<input type="number" value="3,4">
English
<input type="number" value="3.4">
Notice how the page in french will not render the input tag because it the type is number but it is not a number in ENGLISH. Getting to my point, is ALL HTML attributes assumed in a standard HTML language (in English?).
When I create the input tag in HTML, would it have to be a 3.4 instead of 3,4?
And if my CultureInfo was set to French, will my browser display it as 3,4 on the page?
There's a difference between the internal representation of a number (which must always be as in a computer program, with a decimal dot and without thousands separators) and what the user sees when the input control is rendered in the browser (which may or may not follow the user's configured locale).
You must always use decimal dot in HTML code: <input type="number" value="3.4">.
This will display as [ 3.4 ] for English browsers and [ 3,4 ] for French browsers. The browser makes the conversion according to the user's language.
i validation form like this:
cannot give comma
cannot give minus(-)
cannot give 0 number
cannot give blank number
cannot give dot(.) character
this is my code:
<input type="number" required min="1" step="1" pattern="^(\d+\.)?\d+$" />
how pattern to prevent that?
From what I checked, it seems that it may depend on browser. With following pattern, Chrome allows numbers only, Firefox marks numbers with coma or dot as invalid and IE allows [a-z] as well.
^([1-9]|\.|\,)+([0-9])*(\.|\,)?([0-9])*$
I would add onchange event and set it up with javascript, because I can't see pattern, which will allow/disallow 0 based on first character and will remove browsers differences. 0,1 is still number.
I want to use the number input type for my HTML form.
Unfortunately it only accepts real numbers, no dashes between.
Is there a way to make the number input accepting numbers like "1234-123456789" ?
I recently had the same issue. I got around it by using type="tel" instead of type="text" or type="number". By using 'tel' I was able to get a numeric only keyboard on mobile devices and still be able to use my pattern="[0-9\-]+".
Here is the code I used. I hope this is good enough for what you need. They really need to make it so that adding a pattern attribute overrides any built in pattern set by the type attribute.
<input id='zipcode' name='zipcode' type='tel' pattern="[0-9\-]+" placeholder='Zip-code'>
Of course this will only work if all you want is dashes and possibly parentheses.
You can use a regular expression against which the value will be validated. Simply put it in the pattern attribute. You also have to change your input's type to text in order to use that.
<input type="text" pattern="[0-9]+([-\,][0-9]+)?" name="my-num"
title="The number input must start with a number and use either dash or a comma."/>
inputmode="numeric" is your new best friend..
https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/#numeric
In Chrome 15, when using the element as a text field, leading zeros (e.g. 011) are removed even if the number entered does not break the validation rules (e.g. min, max). Is there an attribute to force the zero to remain in the field after it loses focus? The application for this is numeric data such as international phone prefixes.
<input type="text" pattern="[0-9]*" ...
that should do it for you. Will bring up the numeric keypad on iPhone and the nicer Android phones I've tested on.
<input type="tel"> has been introduced for this exact purpose. It's one of the new input types in HTML5.
I needed it for mobiles browsers and I used a mix of both solutions like this :
<input type="tel" pattern="[0-9]*">
On iOS, the numeric keyboard appear with only numbers available (no # or * symbols) whereas on Android phones, the "tel" is correctly interpreted but not the pattern (not yet on the few phones I have).
I guess that when android browsers will start to implement "pattern" attribute, this should work fine on android too (as the whatwg spec suggests).
Until then you will have to check for non numeric characters in your input and remove them. javascript replace(/[^0-9*]/g,'') is useful for this.
hope this helps
8 Years later...
Beware:
The answers with the usage of type="tel" don't fully solve the issue especially in the case of numeric fields where you might want to write floating/decimal numbers and other allowed characters (like +-.,).
Solution:
Consider using text input with pattern and inputmode like this:
<input type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">
Details:
The pattern there will help to keep leading 0s, and behave like a numeric field (with all the other allowed characters).
And the inputmode="numeric" will pull the numeric keyboard instead of the default one.
The answer WHATWG provided me in IRC was that for non-numeric (e.g. not float/int) data that is numeric in nature, text is generally the correct type of input to use. The expection is if you are using something where a specific input type (e.g. telephone numbers, dates) already exists.
input type=number should only be used for inputs that are literally numbers (int), and not data that uses numerals (such as postal codes).
I have an input field whose name is an MD5 string e.g.:
<input type="hidden" name="7815696ecbf1c96e6894b779456d330e" value="1">
Now I understand that having a number as the first letter in an input field name is generally bad practice, but are there any side-effects to this such as a certain browser won't send it in the POST request?
An ID attribute would have had to begin with a letter as per the HTML 4.01 W3C specification, however since the NAME attribute of input elements is of CDATA type (Source), this restriction does not apply.
One real restriction you get on NAME attributes is when you submit a form with the GET method, because in this case, form data must be restricted to ASCII codes (Source).
The HTML spec doesn't restrict the control name in any way. In fact it even says that the control name is URL-encoded and that spaces and non-alphanumeric characters are handled in a certain way, so obviously the designers anticipated names having an arbitrary format.
As far as I know, you should have no problem in any browser.
But you can always consider to prepend some kind of string, also for convenience:
e.g.,
<input type="hidden" name="h.7815696ecbf1c96e6894b779456d330e" value="1">
Which can help someway.