真正弹出数字小键盘需用inputmode="numeric"而非type="number"，因其直接指定输入模式，iOS/Android均支持；配合type="text"避免副作用，辅以JS实时清洗非法输入。
为什么原生 <input type="number"> 在手机上不弹数字键盘
因为浏览器对 type="number" 的解释不一致：iOS Safari 会优先弹出带小数点和负号的“数字+符号”键盘，Android Chrome 可能弹出全键盘或简略数字键盘，根本不是你想要的纯数字小键盘（numpad）。这不是 bug，是规范留白导致的实现差异。
真正触发系统数字小键盘（如 iOS 的「123」键盘、Android 的 numeric keypad）的关键，是 inputmode 属性 —— 它比 type 更直接地告诉浏览器“用户要输什么”，且被现代移动端浏览器广泛支持。
-
inputmode="numeric"：触发最接近传统 numpad 的键盘（无小数点、无负号，纯 0–9） -
inputmode="decimal"：带小数点的数字键盘（iOS/Android 均支持） -
inputmode="tel"：电话键盘（含 * 和 #，但数字布局更紧凑，有时被误用） - 不要依赖
pattern="[0-9]*"或maxlength来“诱导”键盘类型，它们无效
怎么写一个真正弹出数字小键盘的输入框
只需一行关键属性，配合合理 type：
<input type="text" inputmode="numeric" pattern="[0-9]*" autocomplete="off" />
说明：
立即学习“前端免费学习笔记（深入）”；
- 用
type="text"而非type="number"，避免浏览器自动添加上下箭头、科学计数法解析等副作用 -
inputmode="numeric"是核心，iOS 12.2+ 和 Android Chrome 71+ 均可靠生效 -
pattern="[0-9]*"是辅助：在表单提交时做基础校验（非实时拦截），不影响键盘类型 -
autocomplete="off"防止某些 Android 浏览器因历史输入联想而降级为全键盘
注意：inputmode 不改变输入值类型，后续仍需 JS 手动转 Number 或校验范围。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
如何限制只能输数字、禁止粘贴字母、拦截非法按键
仅靠 HTML 属性无法完全阻止非法输入（比如长按粘贴、外接蓝牙键盘），必须配合 JS 拦截。重点不是“过滤”，而是“预防”：
- 监听
input事件做实时清洗：el.value = el.value.replace(/\D/g, '')（简单粗暴但有效） - 监听
keydown拦截非数字键：if (!/^[0-9]$/.test(event.key) && !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight'].includes(event.key)) event.preventDefault() - 禁用粘贴：
el.addEventListener('paste', e => e.preventDefault())，或监听paste后清洗剪贴板内容 - 避免用
onkeypress：它在现代浏览器中已废弃，且不触发 Ctrl+V 等组合操作
别试图用 contenteditable + 自定义键盘 UI 替代 —— 这样既失去原生键盘性能和无障碍支持，又增加维护成本。
iOS 微信 WebView 和某些 Android 定制浏览器的兼容补救
部分老旧 WebView（如微信内置 X5 内核 v6.x、华为 EMUI 10 下的系统浏览器）对 inputmode 支持不全，此时可降级使用 type="tel"：
<input type="tel" inputmode="numeric" pattern="[0-9]*" />
原因：
-
type="tel"在绝大多数 WebView 中都会触发数字键盘（因电话号码本质是数字序列） - 保留
inputmode="numeric"作为未来标准兜底 - 用 CSS 隐藏可能显示的电话图标：
input[type="tel"] { appearance: none; -webkit-appearance: none; } - 后端/JS 校验仍按数字逻辑处理，
type="tel"不影响数值解析
真正麻烦的是那些连 inputmode 和 type="tel" 都不响应的极少数内核（如某银行 App 自研 WebView），这时只能接受 fallback 到全键盘 + 强 JS 校验，没有银弹。
记住：数字键盘体验的底线是 inputmode，上线前务必在真机的微信、QQ、支付宝、各品牌系统浏览器里各测一遍 —— 模拟器看不出问题。
