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

封面图 • 2025-12-28 • JavaScript

你可以使用 JavaScript 来限制 `<input>` 输入框只能输入数字。以下是几种常见的方法：

---

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

```html
<input type="text" id="numberInput" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
```

**解释：**

- `oninput` 事件会在用户输入时触发。
- `replace(/[^0-9]/g, '')` 会删除所有非数字字符。

---

### ✅ 方法二：使用 `onkeypress` 事件（不推荐，兼容性差）

```html
<input type="text" id="numberInput" onkeypress="return isNumber(event)">
<script>
function isNumber(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}
</script>
```

**注意：** 这种方式可能会在某些浏览器中不完全有效，比如粘贴或拖拽输入时无法阻止非数字。

---

### ✅ 方法三：使用 `type="number"`（原生 HTML）

如果你不需要自定义输入行为，可以直接使用 HTML 原生的 `<input type="number">`：

```html
<input type="number" id="numberInput">
```

这会自动限制用户只能输入数字，并且在移动端有数字键盘弹出。

---

### ✅ 方法四：使用 JavaScript 监听输入变化（更灵活）

```html
<input type="text" id="numberInput">
<script>
document.getElementById('numberInput').addEventListener('input', function () {
    this.value = this.value.replace(/[^0-9]/g, '');
});
</script>
```

---

### ✅ 总结

| 方法 | 优点 | 缺点 |
|------|------|------|
| `oninput` + 正则 | 简单、直接 | 不能阻止粘贴非数字 |
| `type="number"` | 原生支持，用户体验好 | 不支持小数、负数等 |
| JS 监听输入 | 灵活、可扩展 | 需要额外代码 |

---

如果你需要支持小数、负数或其他格式，也可以告诉我，我可以提供更复杂的版本。