可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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?

回答1:

Browsers do not support HTML5 number inputs seperators very well and each users experience would differ based on their computers regional settings. It may not be wise to force the seperator to be a comma.

The only way I can think of is to use javascript. Here is one example using normal input field. Unfortunately you will lose the html5 input attributes associated with number inputs.

var Inputs = document.querySelectorAll('input');
for (var i=0; i<Inputs.length; i++) {
  Inputs[i].onblur = function() {
    this.value = this.value.replace('.',',');
  }
}

function multiplyAndPopulate() {
  var A1 = theForm.A1field.value.replace(',','.');
  var A2 = theForm.A2field.value.replace(',','.');
  var R1 = (A1*A2);
  if (isNaN(R1) == true) {
    alert('Invalid.');
    return false;
  }
  else {
    theForm.R1field.value = R1;
    theForm.R1field.value = theForm.R1field.value.replace('.',',');
  }
}

<input type="text" pattern="[0-9]+([\,][0-9]+)?" MaxLength="3"/>

回答2:

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.

回答3:

If i understand, this is what you want to accomplish. The whatDecimalSeparator function is telling you which separator is used in ur current browser

function whatDecimalSeparator() {
    var n = 1.1;
    n = n.toLocaleString().substring(1, 2);
    return n;
}

$(document).ready(function(){
    var currentSeparator = whatDecimalSeparator();
    var currentStep = '0'+ currentSeparator + '1';
    $('.js-numberInput')[0].step = currentStep;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="js-numberInput" type="number" step="0.1"  pattern="[0-9]+([\,][0-9]+)?" min="0" max="5" />

UPDATE (comment by Razvan Dumitru):

I find this comment:

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.

in this thread Localization of input type number . One idea is to handle by yourself all this logic and get rid of the type="number" input, if you can do that. You can use a and use custom plugin for spinners