安卓用户反馈输手机号要切两次键盘,数字藏在第二页,十一位数字输错三位。同样的页面在 iOS 上又是正常的数字键盘。第一次遇到会往复杂处想,其实漏掉的多是个小前提。
<input type="tel" inputmode="numeric" pattern="[0-9]*" maxlength="11"
style="font-size:16px" />
输入框用的是 type=text,键盘类型由系统按默认文本推断,安卓各家输入法给的结果不一样。type=number 又会带出上下箭头和科学计数法,不适合手机号。这一点先确认清楚,后面就不用反复试。
碰到「数字键盘调起」这类问题,我习惯先把当前配置原样备份一份,改坏了立刻换回来,不用现场推。临时改动用注释写上日期和原因,过两周自己都记不清为什么这么写。
动手前把原文件复制一份带时间戳,出问题立刻换回去,比现场分析快得多。
具体做法是,保留 type=tel 或 text,加上 inputmode=numeric 明确要数字键盘;用 pattern 限定只允许数字,粘贴时过滤空格和横线;字号保持在 16px 以上,避免 iOS 聚焦时放大页面。
改完照着核一遍,安卓和 iOS 上点输入框都直接弹数字键盘,连续输入十一位不需要切换。
