<input type="number"> 并非真正数字输入框，仅提供基础校验；需配合 inputmode="numeric"、lang 属性及 JS 过滤才能实现可靠数字输入与防错。
HTML <input type="number"> 不是“数字输入框”，它只是带基础校验的文本框——浏览器不会阻止你输字母，提交时才报错，而且移动端键盘不总弹数字盘。
为什么 input[type="number"] 经常不弹数字键盘？
这不是 bug，而是规范行为：是否触发数字键盘取决于设备、浏览器、语言环境（lang 属性）和 inputmode 设置，type="number" 本身不保证。
-
inputmode="numeric"比type="number"更可靠地唤起数字键盘（尤其 iOS Safari） - 加
lang="zh-CN"或lang="en"能提升识别率，避免某些安卓浏览器 fallback 到全键盘 - 如果同时设
type="number"和inputmode="numeric"，优先级以inputmode为准 - 注意：
inputmode="decimal"才带小数点，numeric在部分安卓上只出整数键
min/max/step 的实际约束力有多强？
它们只影响浏览器内置校验和上下箭头行为，**完全不阻止用户粘贴非法值或用 JS 修改 value**。
-
step="1"不能防止用户输入3.5；要严格限制，得监听input或change事件并截断 -
min="0"对负数粘贴无效——用户粘贴-5后，checkValidity()返回false，但值已存在 DOM 中 -
step="any"允许任意小数，但 Chrome 仍可能四舍五入显示（视觉误差，valueAsNumber是准的） - 服务端必须重新校验——前端限制纯属体验优化
怎么让数字输入真正“防错”又不卡手？
靠纯 HTML 不够，得补一层轻量 JS 控制流，重点守住粘贴和键盘输入两个入口。
立即学习“前端免费学习笔记（深入）”；
- 监听
input事件，用正则/^-?\d*\.?\d*$/过滤非数字字符（注意保留负号和小数点） - 对粘贴内容做
parseFloat()+ 范围判断，合法才setSelectionRange()防光标乱跳 - 避免用
keydown拦截——会干扰 Ctrl+V、方向键、退格等正常操作 - 示例逻辑：
input.addEventListener('input', () => { const num = parseFloat(input.value); if (isNaN(num) || num < 0 || num > 100) { input.value = Math.max(0, Math.min(100, num || 0)); } });
最麻烦的其实是小数精度和国际化：不同地区用逗号还是点作小数点，valueAsNumber 在 Firefox 下对逗号分隔符支持差，真要严谨处理，type="text" + 自定义解析反而更可控。
