HTML 输入框仅输入整数

在某些场景下，我们可能需要让用户在输入框中输入整数而非小数或其他类型的内容。这时，我们可以使用 HTML 的一些属性或 JavaScript 代码来实现。

1. 使用 type="number"

HTML 中的 input 元素有一个 type 属性，可以控制输入框的类型。其中，type="number"，可以将输入框限制为只能输入数值类型的内容，同时也可以设置 min 和 max 属性来限定输入的数值范围。

<input type="number" name="age" min="0" max="120" required>

2. 使用 pattern 属性

另一个方法是使用 pattern 属性，使用正则表达式来限制输入框中的内容。使用这种方法可以更加灵活地控制输入框能否输入其他类型的内容。

<input type="text" name="phone" required pattern="[0-9]+" title="请输入数字">

上述代码中，pattern="[0-9]+" 表示输入内容只能为数字，其他内容均不可输入。当用户输入其他类型的内容时，会显示 title 属性中的提示信息。

3. 使用 JavaScript

还有一种方法是使用 JavaScript 来限制输入框中的内容只能为整数，具体实现代码如下：

<input type="text" name="age" oninput="this.value=this.value.replace(/[^\d]/g,'')">

此方法使用 oninput 事件监听输入框中的内容变化，当用户输入非数字字符时，使用正则表达式将其替换为空字符，从而达到限制输入整数的效果。

总结

以上是几种限制 HTML 输入框仅输入整数的方法，可以根据具体需求选择适用的方法实现。其中，使用 pattern 属性可以更加灵活地限制输入内容，而使用 JavaScript 可以实现更多自定义的需求。