如何防止文本元素中的字母？答案

【问题标题】：How can I prevent letters inside a text element?如何防止文本元素中的字母？
【发布时间】：2012-03-10 22:37:59
【问题描述】：

我喜欢输入最大长度为 3。

这些输入值只能是数字，不能是字母。

参考这个帖子：why is <input type="number" maxlength="3"> not working in Safari?你可以看到我不能用 <input type="numbers">

那么如何防止文本输入元素中出现字母呢？

【问题讨论】：

【解决方案1】：

<script>
function checkPattern(elem) {
  if(!elem.value.match('^' + elem.getAttribute('pattern') + '$')) {
    alert('The value must be 3 digits.');
  }
}   
</script>
<input maxlength=3 pattern=[0-9]{3} onchange=
   checkPattern(this)>

根据应用修改错误处理。这个想法是使用 HTML5 pattern 属性并用简单的 JavaScript 代码备份它，用于不支持该属性但禁用 JavaScript 的浏览器。

【讨论】：

喜欢您的 vanillajs 解决方案，但讨厌您未引用的属性。尽管如此，对于 IE（以及其他一些不起眼的浏览器；）很好地使用了新属性和 shim。

【解决方案2】：

你可以使用 jQuery。

$("#myField").keyup(function() {
    $("#myField").val(this.value.match(/[0-9]*/));
});

【讨论】：

您需要考虑 android 平板电脑中的 chrome 浏览器，其中关键事件没有太大帮助。
如果需要，不要忘记考虑负数和小数。