HTML 设置 INPUT只能输入数字

封面图 • 2025-10-07 • JavaScript

在 HTML 中，你可以通过以下几种方式设置 `<input>` 元素**只能输入数字**：

---

### ✅ 方法一：使用 `type="number"`

这是最简单、最推荐的方式。

```html
<input type="number" name="age" />
```

- 这个输入框只允许用户输入数字。
- 浏览器会自动提供一个数字键盘（在移动端）。
- 但注意：如果用户手动输入非数字内容，浏览器可能会忽略或提示错误。

---

### ✅ 方法二：使用 `type="text"` + `oninput` 事件

如果你需要更严格的控制（例如不允许小数），可以使用 JavaScript 来过滤输入：

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

- `replace(/[^0-9]/g, '')` 会移除所有非数字字符。
- 如果你还需要允许小数，可以改成：
  ```html
  this.value = this.value.replace(/[^0-9.]/g, '')
  ```

---

### ✅ 方法三：使用 `pattern` 属性（结合 `type="text"`）

```html
<input type="text" pattern="\d*" title="请输入数字" />
```

- 这种方式依赖于浏览器的验证功能。
- 在表单提交时会进行验证，但不会阻止用户输入非数字内容。

---

### ✅ 方法四：使用 `type="tel"`（适用于移动端）

```html
<input type="tel" inputmode="numeric" />
```

- `inputmode="numeric"` 会强制移动端设备显示数字键盘。
- 但不完全限制输入内容（用户仍可能输入字母）。

---

### 总结对比

| 方法 | 是否只允许数字 | 是否需要 JS | 移动端支持 | 推荐度 |
|------|----------------|-------------|------------|--------|
| `type="number"` | ✅ | ❌ | ✅ | ⭐⭐⭐⭐⭐ |
| `type="text" + JS` | ✅ | ✅ | ✅ | ⭐⭐⭐⭐ |
| `type="text" + pattern` | ❌（仅验证） | ❌ | ✅ | ⭐⭐⭐ |
| `type="tel" + inputmode` | ❌（可输入字母） | ❌ | ✅ | ⭐⭐ |

---

如需 **严格限制只能输入整数**，推荐使用第一种方法（`type="number"`）。  
如需 **实时过滤输入内容**，可以使用第二种方法。