Force decimal point instead of comma in HTML5 number input (client-side)

后端 未结 15 626
情话喂你
情话喂你 2020-11-29 03:05

I have seen that some browsers localize the input type=\"number\" notation of numbers.

So now, in fields where my application displays longitude and la

相关标签:
15条回答
  • 2020-11-29 03:50

    With the step attribute specified to the precision of the decimals you want, and the lang attribute [which is set to a locale that formats decimals with period], your html5 numeric input will accept decimals. eg. to take values like 10.56; i mean 2 decimal place numbers, do this:

    <input type="number" step="0.01" min="0" lang="en" value="1.99">
    

    You can further specify the max attribute for the maximum allowable value.

    Edit Add a lang attribute to the input element with a locale value that formats decimals with point instead of comma

    0 讨论(0)
  • 2020-11-29 03:51

    1) 51,983 is a string type number does not accept comma

    so u should set it as text

    <input type="text" name="commanumber" id="commanumber" value="1,99" step='0.01' min='0' />
    

    replace , with .

    and change type attribute to number

    $(document).ready(function() {
        var s = $('#commanumber').val().replace(/\,/g, '.');   
        $('#commanumber').attr('type','number');   
        $('#commanumber').val(s);   
    });
    

    Check out http://jsfiddle.net/ydf3kxgu/

    Hope this solves your Problem

    0 讨论(0)
  • 2020-11-29 03:53

    Use lang attribut on the input. Locale on my web app fr_FR, lang="en_EN" on the input number and i can use indifferently a comma or a dot. Firefox always display a dot, Chrome display a comma. But both separtor are valid.

    0 讨论(0)
  • 2020-11-29 03:53

    I needed to ensure values can still be entered with a comma instead of a point as a decimal separator. This seems to be an age-old problem. Background info can be found following these links:

    • https://www.slightfuture.com/webdev/html5-input-number-localization.html
    • https://codepen.io/aminimalanimal/full/bdOzRG

    I finally solved it with a little bit of jQuery. Replacing the commas with dots onChange. This seems to be working good so far in latest Firefox, Chrome and Safari.

    $('input[type=number]').each(function () {
    
      $(this).change(function () {
    
        var $replace = $(this).val().toString().replace(/,/g, '.');
    
        $(this).val($replace);
    
      })
    
    });
    
    0 讨论(0)
  • 2020-11-29 03:58

    According to the spec, You can use any as the value of step attribute:

    <input type="number" step="any">
    
    0 讨论(0)
  • 2020-11-29 03:58

    I found a blog article which seems to explain something related:
    HTML5 input type=number and decimals/floats in Chrome

    In summary:

    • the step helps to define the domain of valid values
    • the default step is 1
    • thus the default domain is integers (between min and max, inclusive, if given)

    I would assume that's conflating with the ambiguity of using a comma as a thousand separator vs a comma as a decimal point, and your 51,983 is actually a strangely-parsed fifty-one thousand, nine hundred and eight-three.

    Apparently you can use step="any" to widen the domain to all rational numbers in range, however I've not tried it myself. For latitude and longitude I've successfully used:

    <input name="lat" type="number" min="-90.000000" max="90.000000" step="0.000001">
    <input name="lon" type="number" min="-180.000000" max="180.000000" step="0.000001">
    

    It might not be pretty, but it works.

    0 讨论(0)
提交回复
热议问题