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

【问题标题】：Limit number of digits after decimals in text input限制文本输入中小数点后的位数
【发布时间】：2018-11-14 21:20:15
【问题描述】：

similar question 限制表单输入中允许的字符数。

就我而言，我想将小数点后可以添加的位数限制为 2 位。

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

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

【问题讨论】：

Leo，我看到了你的编辑建议。使用我的方法，您可以输入text 2.00 text 3.00，如果您愿意；通过您的编辑，我们将无法在第一个数字之后添加任何内容：text 2.00。由于您的问题没有明确提到小数必须在input 的末尾，我更喜欢坚持我的方法。我认为这对未来的观众来说更好。 :)

标签： html forms input

【解决方案1】：

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

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

&lt;input type="number" oninput="limitDecimalPlaces(event, 2)" /&gt;

请注意，这不能 AFAIK，用数字输入来防御 this chrome 错误。

【讨论】：

【解决方案2】：

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

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

&lt;input id="fixed2" type="text" /&gt;

注意我这里使用了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" />

希望对你有帮助。

【讨论】：

【解决方案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" />

【讨论】：

我尝试使用 toFixed。问题是在这里你仍然可以引入这些值。我想要一些方法，在引入 maxim 2 数字后无法引入更多。另外，我看到你有 type="number"。我使用 type="text" 因为我的模式不适用于数字。很复杂，我知道...
@LeoMessi 上面的代码会自动转换多余的值并将其限制为两位小数

【解决方案4】：

我认为最好的选择是使用 jQuery 验证器来解决这个问题，您可以在其中为您正在使用的每个字段添加要求。如果您尝试使用 HTML5 解决此问题，则可能会在某些浏览器中无法以您想要的方式工作。

检查这个 --> https://jqueryvalidation.org/

--> https://jqueryvalidation.org/maxlength-method/

【讨论】：