在前端开发中，我们经常需要对用户输入进行验证和过滤。其中一个常见的需求是只允许数字输入文本框中。本文将介绍几种实现方法，并提供代码示例。
方法一：使用正则表达式过滤非数字字符
最常见的方法是通过正则表达式来过滤非数字字符。我们可以监听输入框的input事件，在每次输入时判断输入的内容是否合法，如果不合法则删除非数字字符。
以下是一个基于jQuery实现的例子：
----------------------- ---------- - ---------- - ------------------------- ---- ---
以上代码中，\D表示非数字字符的正则表达式。每当用户输入时，该正则表达式会将输入框中的所有非数字字符替换为空字符串，从而实现只允许数字输入文本框中。
方法二：使用input[type=number]
HTML5新增了一个input类型为number的表单元素，它只允许输入数字。但是，该方法有以下缺点：
- 不支持小数或负数输入；
- 在某些低版本浏览器中可能无法正常工作。
以下是一个例子：
------ ------------- ------- ----------
以上代码中，min和max属性可以设置数字输入框的最小值和最大值。
方法三：使用contenteditable属性
还有一种方法是将<div>元素设置为可编辑，并在输入事件中过滤非数字字符。这种方法的优点是：
- 可以支持更复杂的输入，如小数、负数等；
- 在所有现代浏览器中均可正常工作。
以下是一个例子：
---- -----------------------------
----- --- - ------------------------------ ----------------------------- ---------- - ---------------- - ------------------------------- ---- ---
以上代码中，我们首先将<div>元素设置为可编辑，然后监听其input事件，并在每次输入时判断输入的内容是否合法。
总结
以上是几种只允许数字输入文本框的实现方式。其中，正则表达式过滤非数字字符是最常用的方法；input[type=number]虽然简单易用，但不适用于所有场景；使用contenteditable属性可以实现更复杂的输入。在实际开发中，我们可以根据具体需求选择不同的方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/13595