限制文本字段输入仅限数字

Question

我搜索过谷歌，但我能找到的所有解决方案都非常复杂和冗长。 我需要的是限制我正在进行的调查中的文本字段的输入仅限于数字。 什么是最快最干净的方法？

（我正在使用HTML 4.01严格和ECMAScript）

提前致谢。

Answer 1

最快的：

<input type="text" onkeyup="this.value = this.value.replace(/\D/g, '')">

这不会阻止人们用鼠标粘贴东西，所以也可能需要改变和onclick。

最干净（或至少干净的方式）：

function forceNumeric() {
    this.value = this.value.replace(/\D/g, '');
}

如果您正在使用JS框架，请​​为所有数字输入提供一个指示事实的类 （ class =“numeric”或类似的东西），并添加forceNumeric作为keyup的回调， 更改并单击任何输入该类的元素：

$('.numeric').keyup(forceNumeric).change(forceNumeric).click(forceNumeric);

如果您正在使用直接JS（我建议不使用直接JS），请使用element.addEventListener或onkeyup ， onchange和onclick 。

Answer 2

如果您使用的是jQuery，则可以使用AlphaNumeric插件 。 有了这个插件，它将是一个问题：

$('.numeric_field').numeric();

Answer 3

我们用一个简单的组合解决了这个问题，把握住HTML：

<input type="tel">

使用tel类型有两种方式：浏览器验证和在移动设备上显示数字键盘，以获得更好的用户体验。

然后，一个简单的JS验证（jQuery示例）：

$('[type=tel]').on('change', function(e) {
  $(e.target).val($(e.target).val().replace(/[^0-9]/g, ''))
})
$('[type=tel]').on('keypress', function() {
  return event.charCode >= 48 && event.charCode <= 57
})

我们最终需要2个函数，一个用于普通用户输入（按键），另一个用于复制+粘贴修复（更改）。