步骤不适用于 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 属性可以完美运行。此特定代码的唯一区别是我使用的是引导程序前置表单。否则没有区别。

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

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

我应该做一个 if > 0.99 还是

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;
 }