Menu
What I need is in English browser when I open website that has another culture and UI (i.e. Sweden) to see the proper decimal separator.
How to archive it?
<input type="number" step="0.1" pattern="[0-9]+([\,][0-9]+)?" min="0" max="5" />
If even I apply any number like "0,1" with the next click of spinner Browser reset it to "0.2" which has a dot instead of comma.
So how to keep proper decimal separator?
Any clue how to fix it with jQuery?
363
You can also use a decimal value: for example, a step of 0.3 will allow values such as 0.3, 0.6, 0.9 etc, but not 1 or 2. Now you don't get a validation error. Yay! Also note that if you only want to accept positive numbers, you'll want to add min=”0″.
Use the toFixed() method to format a number to 2 decimal places, e.g. num. toFixed(2) . The toFixed method takes a parameter, representing how many digits should appear after the decimal and returns the result. Copied!
The <input type="number"> defines a field for entering a number. Use the following attributes to specify restrictions: max - specifies the maximum value allowed.
To limit, that is, round a number to n decimal places, use the built-in Math. round() function.
Currently answers provided with this thread lead to the solution of changing type="number" to type="text" which is step back from user point of view.
I handled this problem in different way.
Handling data from backend - form preparation.
Forms usually provide default values or values to edit for some field. That's why it is important how you provide values to input in form. Some frameworks can localize value for you before binding them to the form that's why values coming from your server (database and programming language) can be either comma separated or dot separated. If you provide 0.01 (most cases) as input value you will get no error in any browser on client side but if you provide value of 0,01 (localized value) the value will not be visible in the browser but will be provided in input as an attribute and you will get a console error: it is not proper number value. So the first thing to do is replacing "," with "." when rendering the form on server side so that on client side there is always dot separated value.
If you leave it at this point your form will be vulnerable to locale settings in the browser. If you print such form in Firefox with locale en-US you will see an input with dot separated value but if you print this form with Chrome with locale fr-FR you will see no value which is comma separated. There is a simple solution if you want to enforce specific locale. With this attribute:
<html lang="en-US" >
you will get dots in your input type number and this one will give you comma separated value:
<html lang="pl-PL" >
The lang attribute can also be set at input itself.
Frontend handling.
In Firefox with form set to specific locale you will get a validation error if you will try to put dot or comma as a separator - according to your lang setting. So remember that you cannot set novalidate attribute on form otherwise the value sent on submit will be empty.
Chrome will automatically convert dot to comma or comma to dot for you.
Those are the basic rules for me. Further if you use some JS methods such as parseFloat() you will get dots in the value so you will have to replace dots with comma if you are in comma-like locale.
60
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
