Question

有一个similar 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" />

希望它有所帮助。

Answer 2

我认为最好的选择是使用jQuery验证器来重新启动它，您可以在其中为您正在使用的每个字段添加要求。如果您尝试使用HTML5重新启用此功能，可能会在某些浏览器中以您想要的方式运行。

检查一下 - ＆gt; https://jqueryvalidation.org/

- ＆GT; https://jqueryvalidation.org/maxlength-method/

Answer 3

如果您习惯使用脚本，那么您可以尝试以下方法：

$(document).ready(function() {
  $("input").on("blur", function() {
    $(this).val(parseFloat($(this).val()).toFixed(2));
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" step="0.01" min="0" />

Answer 4

以下解决方案适用于数字输入，因此可以防止字母字符（不同于当前接受的答案）：

function limitDecimalPlaces(e, count) {
  if (e.target.value.indexOf('.') == -1) { return; }
  if ((e.target.value.length - e.target.value.indexOf('.')) > count) {
    e.target.value = parseFloat(e.target.value).toFixed(count);
  }
}

<input type="number" oninput="limitDecimalPlaces(event, 2)" />

请注意，这无法使用AFAIK，请使用数字输入来防范this chrome bug。

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

4 个答案: