type="number"无法真正锁死整数输入，因ui层允许输入负号、小数点等符号，校验仅在提交或调用checkvalidity()时触发，且粘贴内容完全绕过限制；需结合inputmode="numeric"、js实时过滤（input和paste事件）、数值范围校验及后端验证四层防护。
type="number" 是最直接的起点，但它默认不等于“只接受整数”——不设 step 时浏览器会拒绝小数输入，但用户仍可能粘贴非法字符、输入负号或科学计数法，且移动端行为差异极大。纯靠 HTML 属性无法真正锁死整数输入。
为什么 type="number" 加 min="0" 还能输负号或小数点
浏览器对 type="number" 的解析分两层：UI 层允许输入 -、. 等符号（尤其在未失焦前），但底层校验只在提交或调用 checkValidity() 时触发。此时若值不符合当前 min/max/step 约束，input.valueAsNumber 就返回 NaN，而 input.value 仍保留原始字符串（如 "-12."）。
-
step缺失时，部分浏览器（如旧版 Safari）会隐式按step="1"处理，但用户手动输入3.14不会实时拦截，只在失焦后标红 -
min="0"不阻止用户敲-，因为负号本身是合法前缀；只有当完整值（如"-5"）被解析失败或超出范围时才触发校验 - 粘贴内容完全绕过键盘限制：
paste事件里"abc"、"1e2"、"12.3.4"都能进框，valueAsNumber必然为NaN
用 inputmode="numeric" + 正则过滤更可控
在 iOS 和多数安卓浏览器中，inputmode="numeric" 比 type="number" 更可靠地唤起数字键盘，且不带增减按钮干扰。配合 JS 实时过滤，能真正截断非法字符。
- 监听
input事件，用/^[0-9]*$/匹配纯数字（空字符串也允许） - 必须同时监听
paste事件并preventDefault()，再读取剪贴板内容、清洗后赋值 - 避免用
oninput="this.value = this.value.replace(...)"写在 HTML 里——它无法处理粘贴，且在 Vue/React 中易与响应式冲突 - 示例逻辑片段：
const el = document.querySelector('input[data-integer-only]');<br>el.addEventListener('input', () => {<br> el.value = el.value.replace(/[^0-9]/g, '');<br>});<br>el.addEventListener('paste', (e) => {<br> e.preventDefault();<br> const text = e.clipboardData.getData('text');<br> el.value += text.replace(/[^0-9]/g, '');<br>});
maxlength 和位数限制不能混用
maxlength 控制的是字符长度，不是数值大小。比如 maxlength="4" 允许输入 "0000"（合法整数）或 "9999"，但也允许 "123"（3 位）甚至空值——它和“限制为 1~9999 的整数”是两回事。
- 若需数值上限（如 ≤ 9999），必须结合 JS 校验
parseInt(el.value) > 9999并重置 - 若只要最多 4 位数字，可在正则过滤后加长度截断：
if (el.value.length > 4) el.value = el.value.slice(0, 4) -
maxlength对type="number"无效（浏览器忽略），仅对type="text"生效
真正可靠的整数输入控制，从来不是单靠一个属性或类型。type="number" 提供基础语义和键盘提示，inputmode 弥合移动端缺口，JS 过滤堵住粘贴和非法输入，后端校验才是最后一道门——这四层缺一不可，少一层就可能被绕过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
