如何实现<input type="number">仅允许输入最多两位小数？

这个问题确实挺常见的——原生的<input type="number">在限制小数位数上确实有点“宽松”：哪怕你设置了step="0.01"，用户还是能手动输入像3.3532这种超过两位小数的值。不过别担心，有几种靠谱的方案可以实现严格限制最多两位小数的需求：

方案1：实时监听输入事件，即时修正 #

这是最直观的方法，通过监听input事件，实时过滤和修正用户的输入，确保始终最多保留两位小数，同时还能保留数字输入框的上下箭头功能：

<input type="number" step="0.01" id="decimalInput">

<script>
const input = document.getElementById('decimalInput');
input.addEventListener('input', function(e) {
  // 先过滤掉所有非数字、非小数点的字符
  let value = e.target.value.replace(/[^0-9.]/g, '');
  // 确保只有一个小数点
  const dotPosition = value.indexOf('.');
  if (dotPosition !== -1) {
    // 小数点后只保留两位，截断多余部分
    value = value.slice(0, dotPosition + 3);
  }
  e.target.value = value;
});
</script>

这个方法会在用户每输入一个字符时就进行处理，从根源上阻止多位小数的输入。

方案2：结合pattern属性与表单验证（适合表单场景） #

如果你的输入框是在表单里，可以用pattern正则配合表单验证，提交时自动检查格式。不过要注意：原生type="number"对pattern的支持有些局限，所以我们可以改用type="text"+inputmode="decimal"，既保证移动端弹出数字键盘，又能利用正则严格限制格式：

<form>
  <input 
    type="text" 
    inputmode="decimal" 
    pattern="^\d*\.?\d{0,2}$" 
    title="请输入最多两位小数的数字"
    required
  >
  <button type="submit">提交</button>
</form>

当用户点击提交时，如果输入不符合格式（比如超过两位小数），浏览器会自动弹出title里的提示，阻止表单提交。

方案3：失去焦点时自动修正（宽松型限制） #

如果你不需要实时拦截，只要求最终输入值是两位小数，可以监听blur事件，在用户离开输入框时自动将值四舍五入到两位小数：

<input type="number" step="0.01" id="decimalBlurInput">

<script>
const input = document.getElementById('decimalBlurInput');
input.addEventListener('blur', function(e) {
  if (e.target.value) {
    // 四舍五入到两位小数，注意toFixed返回的是字符串，会自动补零（比如3会变成3.00）
    e.target.value = parseFloat(e.target.value).toFixed(2);
  }
});
</script>

这个方案比较友好，用户输入时可以临时输入多位小数，离开时自动修正为符合要求的格式。

补充：为什么原生step="0.01"不生效？ #

很多人会疑惑，设置了step="0.01"为什么还能输入多位小数？其实step属性的作用是控制上下箭头的步长，以及表单验证时的步长匹配检查——它并不会阻止用户手动输入不符合step规则的值，除非你配合JS主动验证validity.stepMismatch状态并处理。

内容的提问来源于stack exchange，提问作者Joe Scotto