IE11下仅允许输入数字的input控件问题求助

你遇到的这个问题其实是浏览器对type="number"输入框的默认行为导致的——当输入内容以数字开头时，浏览器会自动提取前面的有效数字部分作为输入值，所以像"2blah"这种内容不会被清空。下面给你几个实用的解决方案：

方法1：实时过滤输入内容（最友好的用户体验） #

通过JavaScript监听输入事件，实时移除非数字字符，从根源上阻止无效内容输入。代码示例：

<input type="number" id="numericInput" />

<script>
const input = document.getElementById('numericInput');
input.addEventListener('input', function(e) {
  // 只保留数字字符，替换掉所有非0-9的内容
  this.value = this.value.replace(/[^0-9]/g, '');
});
</script>

这样用户输入字母或者其他非数字字符时，输入框里会直接过滤掉，根本不会显示出来，体验非常流畅。

方法2：利用HTML5约束验证强制纯数字检查 #

如果希望在控件失去焦点或者表单提交时再做验证，可以结合invalid事件和约束验证API：

<input type="number" pattern="[0-9]*" id="numericInput" required />

<script>
const input = document.getElementById('numericInput');
input.addEventListener('blur', function() {
  // 手动触发验证
  if (!this.checkValidity()) {
    // 如果验证不通过，清空输入框
    this.value = '';
    // 也可以添加自定义提示
    this.setCustomValidity('请输入纯数字');
    this.reportValidity();
  } else {
    this.setCustomValidity('');
  }
});
</script>

这里的关键是checkValidity()会严格检查是否符合pattern="[0-9]*"的规则，只要包含非数字字符就会验证失败，此时我们可以清空输入或者给出提示。

方法3：改用type="text"配合pattern和过滤 #

有些浏览器对type="number"的pattern属性支持不够严格，换成type="text"反而能更好地发挥pattern的作用，再配合上面的实时过滤：

<input type="text" pattern="[0-9]*" id="numericInput" inputmode="numeric" />

<script>
const input = document.getElementById('numericInput');
input.addEventListener('input', function(e) {
  this.value = this.value.replace(/[^0-9]/g, '');
});
</script>

加上inputmode="numeric"还能在移动端唤起数字键盘，兼顾体验和验证效果。

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