用js使得输入框input只能输入数字

封面图 • 2025-04-27 • JavaScript

你可以通过在 `input` 元素上添加 `oninput` 或 `onkeydown` 事件监听器来限制用户只能输入数字。以下是几种实现方式：

### 方法一：使用正则表达式和 `oninput` 事件

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Only Numbers</title>
</head>
<body>

input.oninput = function() {
        // 只允许输入数字
        this.value = this.value.replace(/[^0-9]/g, '');
    };
</script>

</body>
</html>
```

### 方法二：使用 `onkeydown` 事件

input.onkeydown = function(event) {
        // 如果按下的是非数字键，阻止默认行为
        if (!/^[0-9]$/.test(event.key)) {
            event.preventDefault();
        }
    };
</script>

</body>
</html>
```

### 方法三：使用 `type="number"`

HTML5 提供了一个内置的 `<input type="number">` 类型，可以直接限制输入为数字。

</body>
</html>
```

这种方法是最简单的方式，但需要注意，`type="number"` 在某些情况下可能会有兼容性问题（比如移动端键盘可能不会自动切换到数字键盘）。

### 总结

- **方法一** 和 **方法二** 是通过 JavaScript 实现的，适合需要更灵活控制的情况。
- **方法三** 是 HTML5 的原生支持，简单易用，但功能有限。