JS 中仅允许数字输入

在 Web 开发中，经常需要限制用户只能输入数字。这在各种场景中都很有用，例如收集财务数据、计算器或其他要求数字输入的应用程序。JavaScript 提供了多种方法来实现此目的。

JS 中仅允许数字输入

input[type="number"]

HTML5 中的 `` 元素提供了 `type="number"` 属性，允许用户输入数字并自动验证输入内容是否有效。这是一个简单、标准的方法，对于大多数情况都足够。

正则表达式

正则表达式是一种用于模式匹配的强大工具。可以使用以下正则表达式仅允许数字输入：

``` /^[0-9]+$/ ```

这个正则表达式将匹配仅包含 0 到 9 的数字字符的字符串。可以使用此正则表达式来验证输入并阻止非数字字符。

```js function validateNumber(input) { const pattern = /^[0-9]+$/; return pattern.test(input); } ```

事件监听器

也可以使用事件监听器来限制只能输入数字。可以使用 `keypress` 事件监听用户按下的每个键，并检查键值代码是否与数字键对应。

```js const input = document.getElementById("number-input");

input.addEventListener("keypress", (e) => { const key = e.key; if (key < "0" || key > "9") { e.preventDefault(); } }); ```

Number() 函数

`Number()` 函数可以将字符串转换为数字。如果字符串不能转换为有效数字，则返回 `NaN`。可以使用此函数来验证输入并阻止非数字字符。

```js function validateNumber(input) { const number = Number(input); if (isNaN(number)) { return false; } else { return true; } } ```

自定义验证方法

也可以创建自己的自定义验证方法来处理特定需求。例如，可以使用以下方法允许带小数点的数字输入：

```js function validateDecimalNumber(input) { const pattern = /^[0-9]+(.[0-9]+)?$/; return pattern.test(input); } ```