input type=”number” 为什么允许输入小数点和小数？怎么限制整数？

type=”number” 默认允许小数点、e和负号，因其遵循html5规范支持所有数字格式；实现正整数限制需结合min=”0″、step=”1″、onkeypress拦截非数字字符及oninput清洗输入值。

浏览器原生的数字输入类型，它的设计目标是支持所有合法的数值表达，包括整数、小数、科学计数法（比如 1e2），所以默认允许输入小数点、e 和负号。它不是“只允许整数”，而是“只允许数字格式”——而小数和指数在数学上就是数字。

为什么小数点和 e 能输进去？

这是 html5 规范明确允许的行为：
• 小数点（.）用于分隔整数和小数部分；
• 字母 e 或 E 用于科学计数法（如 1.23e4 表示 12300）；
• 浏览器不会在输入过程中拦截这些字符，只在表单提交或读取 .valueAsNumber 时做解析校验。
所以仅靠 type="number" 无法实现“纯正整数”限制。

真正限制为正整数的实用方法

必须结合 HTML 属性 + javaScript 校验，才能可靠拦截非法字符：

• HTML 层加固：加上 min="0" 和 step="1"，禁用负数和小数步进
• 阻止键盘输入非法字符：用 onkeypress 拦截非数字键（注意不能用箭头函数，需访问 Event）
• 处理粘贴和拖入等绕过行为：用 oninput 清洗值，例如 value = value.replace(/[^0-9]/g, '')
• 移除右侧上下箭头（可选但推荐）：加 css appearance: none; -webkit-appearance: none; 避免用户误点箭头输入小数

一个简洁可用的正整数 input 示例

  onkeypress=”if(event.charCode 57) event.preventDefault()”
  oninput=”this.value = this.value.replace(/[^0-9]/g, ”)”>

说明：
• charCode 57 对应 ASCII 中非数字字符（排除小数点、e、负号等）；
• oninput 确保粘贴、右键粘贴、拖放文本进来时也被清洗；
• 不依赖 pattern 或 required，因为它们对 type="number" 的实时拦截无效。

vue 或 react 场景下的注意事项

框架中不要只依赖 v-model.number 或 valueAsNumber：
• .number 修饰符只在绑定后转换，不阻止输入过程；
• 用户仍可输入 1.5 或 -2，然后被转成 NaN 或负数；
• 应在 @input 或 onChange 中主动校验并重置 value，例如：
if (!/^d+$/.test(val)) this.inputValue = '' 或直接截断为 math.max(0, Math.floor(Number(val)))。