步骤不适用于 HTML 中的输入 - 该字段接受任意数量的小数位

Question

我使用的是简单的数字输入法，我删除了微调器以便用户可以输入他们自己的数字。完整的输入代码是：

<input type="number" onkeypress="return isNumberKey(event)" id="userInputMapOne" class="form-control" min="0" step="0.01" aria-label="input value for your zone">

但我发现用户可以输入比要求的 0.01 步长更多的小数位数。这很烦人。在页面的另一部分，step 属性完美运行。此特定代码的唯一区别是我使用的是 bootstrap 前置形式。否则没有区别。

输入将值发送到 JavaScript 函数，但如果该函数将输入限制为小数点后两位就好了。

我应该使用什么代码让 JS 不接受任何超过 2 位的小数位 d.p？

我应该做一个 if > 0.99 还是 < 0.00 ？小数点也得有JS代码吧？

Answer 1

尝试：

<input type="number" onkeyup="return isNumberKey(this, 2)" id="userInputMapOne" class="form-control" min="0" step="0.01" aria-label="input value for your zone">

function isNumberKey(obj, decimals) {
    if (obj.value % Math.round(obj.value)) {
        var divisor = Math.pow(10, decimals);
        obj.value = Math.floor(obj.value * divisor)/divisor;
    }

    console.log(obj.value);
 }

注意：

我用的是onkeyup，就是你要改的时候。

编辑：

如果您还需要检查数字：

<input type="number" onkeypress="return isNumberKey(event)" onkeyup="return truncateDecimals(this, 4)" id="userInputMapOne" class="form-control" min="0" step="0.01" aria-label="input value for your zone">

function isNumberKey(evt) {
    let charCode = (evt.which) ? evt.which : evt.keyCode; 
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46) {
      evt.preventDefault();
      return false;
    }
    return true;
 }

 function truncateDecimals(obj, decimals) {
    if (obj.value % Math.round(obj.value)) {
      
        var divisor = Math.pow(10, decimals);
        obj.value = Math.floor(obj.value * divisor)/divisor;
    }

    console.log(obj.value);
    return true;
 }

步骤不适用于 HTML 中的输入 - 该字段接受任意数量的小数位

Step not working for an input in HTML - the field is accepting any number of decimal places

javascript

input

numbers

decimal