限制文本输入中小数点后的位数

Question

有一个类似的问题，它限制了表单输入中允许的字符数。

在我的情况下，我想将小数点后可以添加的位数限制为 2 位数。

<input type="text" maxlength="2"/>

有没有办法限制小数点 ( .)后的数字？

Answer 1

因为我不知道有什么方法可以在 HTML 中做到这一点......
下面是我将如何使用一些 JavaScript 来做到这一点，使用 RegEx 删除多余的小数：

var myInput = document.querySelector('#fixed2');
myInput.addEventListener("keyup", function(){
  myInput.value = myInput.value.replace(/(\.\d{2})\d+/g, '$1');
});

<input id="fixed2" type="text" />

注意我keyup这里使用了事件，这样就可以看到自动删除了。但它也很好用input！

? ? ?

我们可以将此方法推广到处理多个输入，使用自定义属性，如decimals：（
我在input这里使用事件，所以你会看到不同之处）

var myInputs = document.querySelectorAll('.fixed');
myInputs.forEach(function(elem) {
  elem.addEventListener("input", function() {
    var dec = elem.getAttribute('decimals');
    var regex = new RegExp("(\\.\\d{" + dec + "})\\d+", "g");
    elem.value = elem.value.replace(regex, '$1');
  });
});

<input class="fixed" type="text" decimals="2" placeholder="2 decimals only" />
<br><br>
<input class="fixed" type="text" decimals="3" placeholder="3 decimals only" />

希望能帮助到你。