type="number" 不实时阻止非数字输入，仅在提交时校验；需结合 inputmode、pattern 和 input 事件正则清理实现纯数字输入；value 始终为字符串，数值运算须显式转换。
input type="number" 本身不阻止键盘输入非数字字符
很多人以为 type="number 能像表单验证一样实时拦截字母、符号，实际不是。浏览器允许用户粘贴、用退格键编辑、甚至输入 e、+、-、.（尤其在科学计数法场景下），提交时才触发校验。这意味着用户看到的输入框里可能短暂出现 12a3 或 ..5，但 value 属性可能为空或为无效值。
真正起作用的是浏览器内置的「输入语义」和后续的 checkValidity() 或 reportValidity()，而非实时过滤。
- Chrome/Firefox 允许输入
e、E、+、-、.（小数点），只要组合起来能被解析为有效数字（如1e2、-.5）就视为合法 - Safari 对
e和小数点更宽松，有时连1.2.3都不立即报错 -
valueAsNumber在非法输入时返回NaN，但value字符串仍保留原始输入（如"12abc"）
用 inputmode + pattern + JavaScript 补足实时控制
如果业务要求「输入框里只显示纯数字」（比如手机号、ID 编号），必须主动干预。推荐组合使用：
-
inputmode="numeric"：唤起移动端数字键盘（iOS/Android 均支持），但不阻止用户切换回字母键盘 -
pattern="[0-9]*"：配合title提示，仅在form.reportValidity()时生效，不影响输入过程 - 监听
input事件，用正则清理值：input.addEventListener('input', e => { e.target.value = e.target.value.replace(/[^0-9]/g, ''); }); - 避免监听
keydown：它无法处理粘贴、拖拽、语音输入等场景，且会干扰Ctrl+V等快捷键
min/max 和 step 影响用户输入行为
min、max、step 不仅是校验规则，还会改变浏览器对合法输入的判断范围。例如：
立即学习“前端免费学习笔记（深入）”；
-
<input type="number" min="0" max="100">：输入-5或101后，valueAsNumber为NaN，但value仍是字符串"-5" -
<input type="number" step="1">：输入3.5不报错；但step="any"才允许任意小数（默认就是any） -
step="0.01"时，1.001会被认为无效，即使valueAsNumber是数字
注意：min/max 对空值、非数字字符串无约束力——它们只在值可解析为数字时参与校验。
移动端兼容性与替代方案
Android Chrome 和 iOS Safari 对 type="number" 的实现差异较大，尤其在光标定位、粘贴逻辑、以及 inputmode 响应上。若发现频繁失焦或输入卡顿，可考虑降级为 type="text" + 完整 JS 控制：
- 用
oninput替代addEventListener更轻量（但无法移除事件） - 对粘贴内容做同步清洗：
input.addEventListener('paste', e => { e.preventDefault(); const text = e.clipboardData.getData('text'); const cleaned = text.replace(/[^0-9]/g, ''); document.execCommand('insertText', false, cleaned); }); - 避免用
contenteditable或自定义输入组件——除非你已准备好处理所有输入法、无障碍、焦点管理
最易被忽略的一点：type="number" 的 value 始终是字符串，哪怕看起来像数字；需要数值运算时务必显式调用 parseInt() 或 parseFloat()，不能依赖隐式转换。
