将文本框输入限制为仅数字

Question

我在谷歌上搜索了很久，但是找到的所有解决方案都非常复杂和冗长。我需要的是将调查表中文本框的输入限制为仅数字。最快，最简洁的方法是什么？

（我使用HTML 4.01 strict和ECMAScript）

提前感谢您的帮助。

- Hussain

---

看一下这个示例：只允许数字输入文本框。 - Rubens Farias

嗯，出于某些原因似乎不起作用。 - Hussain

那个例子已经有12年的历史了。不建议去查看它。 - Robin van Baalen

Answer 1

最快的方法：

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

这不会阻止人们使用鼠标粘贴内容，因此 onchange 和 onclick 也可能是必要的。

最清晰（或至少较为清晰的）方法是：

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

如果您正在使用JS框架，请给所有只包含数字的输入框添加一个指示类（例如class="numeric"），并将forceNumeric作为回调函数添加到具有该类的任何输入元素的keyup、change和click事件中：

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

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

- pib

---

如果您尚未使用框架（例如jQuery），则直接使用JS即可。我不会仅为添加此微小的功能而包含jQuery。 - Mike Causer

Answer 2

如果您正在使用jQuery，则可以使用AlphaNumeric插件。 使用此插件只需：

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

- Daniel Vassallo

---

请记住，使用 JavaScript 强制输入某些类型的数据并不能替代服务器端验证；我可以简单地关闭 JavaScript 运行您的页面，甚至在提交之前使用类似 Firebug 的工具对您的页面进行修改。通过 JS 不允许某些字符并不能防止那些真正想要提交它们的人提交这些字符。 - Erik

当然可以。验证是在服务器端完成的。在客户端，您只是提高了可用性。 - Daniel Vassallo

Answer 3

我们用一个简单的组合解决了这个问题，首先是HTML代码：

。

<input type="tel">

使用type="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
})

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

- mencargo