只允许数字输入文本框中的实现方法

在前端开发中，我们经常需要对用户输入进行验证和过滤。其中一个常见的需求是只允许数字输入文本框中。本文将介绍几种实现方法，并提供代码示例。

方法一：使用正则表达式过滤非数字字符

最常见的方法是通过正则表达式来过滤非数字字符。我们可以监听输入框的input事件，在每次输入时判断输入的内容是否合法，如果不合法则删除非数字字符。

以下是一个基于jQuery实现的例子：

$("#input").on("input", function() {
  this.value = this.value.replace(/\D/g, "");
});

以上代码中，\D表示非数字字符的正则表达式。每当用户输入时，该正则表达式会将输入框中的所有非数字字符替换为空字符串，从而实现只允许数字输入文本框中。

方法二：使用input[type=number]

HTML5新增了一个input类型为number的表单元素，它只允许输入数字。但是，该方法有以下缺点：

• 不支持小数或负数输入；
• 在某些低版本浏览器中可能无法正常工作。

以下是一个例子：

<input type="number" min="0" max="100">

以上代码中，min和max属性可以设置数字输入框的最小值和最大值。

方法三：使用contenteditable属性

还有一种方法是将<div>元素设置为可编辑，并在输入事件中过滤非数字字符。这种方法的优点是：

• 可以支持更复杂的输入，如小数、负数等；
• 在所有现代浏览器中均可正常工作。

以下是一个例子：

<div contenteditable="true"></div>

const div = document.querySelector("div");
div.addEventListener("input", function() {
  this.textContent = this.textContent.replace(/\D/g, "");
});

以上代码中，我们首先将<div>元素设置为可编辑，然后监听其input事件，并在每次输入时判断输入的内容是否合法。

总结

以上是几种只允许数字输入文本框的实现方式。其中，正则表达式过滤非数字字符是最常用的方法；input[type=number]虽然简单易用，但不适用于所有场景；使用contenteditable属性可以实现更复杂的输入。在实际开发中，我们可以根据具体需求选择不同的方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13595