type="number" 默认允许小数点、e和负号，因其遵循HTML5规范支持所有数字格式；实现正整数限制需结合min="0"、step="1"、onkeypress拦截非数字字符及oninput清洗输入值。
因为 type="number" 是浏览器原生的数字输入类型，它的设计目标是支持所有合法的数值表达，包括整数、小数、科学计数法（比如 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)))。
