iOS Safari直到16.4才支持inputmode，仅部分值有效且只影响键盘类型；Android Chrome 82+支持较好，但国产浏览器基本忽略；需配合type="text"使用，优先用inputmode="numeric"而非type="number"。
inputmode属性在iOS Safari里根本不起作用？
不是你的写法错，是iOS Safari直到iOS 16.4才开始支持inputmode——更准确地说，只支持部分值，且仅影响系统键盘类型，不改变表单验证或提交行为。Android Chrome从82+就较完整支持，但国产浏览器（如微信内置X5内核）基本忽略该属性。
常见错误现象：inputmode="decimal"在iPhone上仍弹出全键盘；inputmode="numeric"在某些安卓机上弹出带字母的“数字键盘”。
- 必须配合
type="text"使用（type="number"会覆盖inputmode） -
inputmode="tel"和inputmode="email"兼容性最好，iOS/Android都较稳定 - 避免用
inputmode="search"——它不触发搜索键盘，只是语义提示
type=number vs inputmode=numeric：选哪个？
优先用inputmode="numeric"，除非你真需要type="number"的自动校验和上下箭头。
原因很实际：type="number"在iOS上会把小数点强制转成逗号（受系统区域设置影响），用户输12.5可能变成12,5；还会禁用长按粘贴、阻止非数字字符输入（连“-”都不让输），导致负数、科学计数法等场景直接不可用。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 纯数字输入（如验证码）→
type="text" inputmode="numeric" - 需要小数且用户懂格式 →
type="text" inputmode="decimal" - 要限制范围或需JS校验 → 用
type="number"，但务必加step="any"和自定义输入拦截
中文输入法下inputmode失效怎么办？
所有inputmode值在中文拼音/五笔输入法激活时都会退化为默认键盘——这是系统级限制，前端无解。用户切到中文模式后，inputmode="numeric"照样能打汉字。
真实使用场景中，这反而不是大问题：国内用户习惯先切输入法再输内容，而表单字段本身有明确标签（如“手机号”），用户不会乱输。强行拦截中文输入反而破坏体验。
- 别监听
input事件去过滤中文字符——用户复制粘贴带空格的号码会被截断 - 校验放在提交前，用正则
/^[0-9+\-\s()]*$/比实时拦截更可靠 - 如果字段必须纯数字（如银行账号），用
inputmode="numeric"+ 提交时校验，别依赖键盘限制
移动端键盘弹起后页面被顶起或遮挡输入框
inputmode本身不解决这个问题，但错误的type选择会让它更糟。比如type="number"在iOS上常触发更激进的页面缩放，而type="text" inputmode="numeric"能减少误判。
真正有效的控制点只有两个：viewport设置和滚动锚定。
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1.0">没被动态修改 - 输入框进入视口前，用
element.scrollIntoView({ behavior: 'smooth', block: 'nearest' })主动滚动 - 避免给
body设height: 100vh——键盘弹出会压缩可用高度，导致布局错乱
复杂点在于：不同机型、不同微信版本对键盘高度计算差异极大，没有通用CSS方案。能靠住的只有JS滚动控制 + 容错校验。
