HTML5.2已废弃inputmode属性，求移动端适用的替代方案

哈哈，这个移动端键盘唤起的坑我真的踩过N次！inputmode确实实用性拉满但被废弃，而且之前的支持度也一言难尽，再加上type="number"配合pattern也经常掉链子，给你几个实测有效的替代方案，覆盖大部分移动端场景：

1. 精准使用type属性的细分类型 #

这是最省心的方案，几乎所有移动端浏览器都支持，直接对应场景选：

• type="tel"：强烈推荐给手机号、验证码、纯数字ID这类场景！它会直接唤起纯数字的拨号键盘，没有type="number"那种讨厌的上下箭头，也不会允许输入e、+这类奇怪字符（虽然理论上支持*、#，但实际业务里可以用JS简单限制）。我做验证码输入的时候，用这个比number靠谱10倍。
• type="email"：邮箱输入必用，会唤起带@和.的专用键盘，输入体验直接拉满。
• type="url"：网址输入场景用，键盘会自带/、.com快捷按钮，用户输入更顺畅。

2. type="text" + pattern 组合兜底 #

如果是需要严格限制输入格式（比如6位纯数字验证码），又不想用tel的话，可以试试这个组合：

<input type="text" pattern="[0-9]{6}" maxlength="6">

很多移动端浏览器会识别pattern里的纯数字规则，自动唤起数字键盘。再配合maxlength限制长度，体验也不错。要是怕用户输入非数字，再加几行JS限制输入内容就行，比如：

inputElement.addEventListener('input', (e) => {
  e.target.value = e.target.value.replace(/[^0-9]/g, '');
});

3. 场景化的特殊属性 #

针对一些特定场景，还有些属性能帮你唤起对应键盘：

• 验证码场景：可以加autocomplete="one-time-code"，部分移动端浏览器会直接弹出数字键盘，甚至能自动读取短信里的验证码填充，体验超棒。
• 金额输入：如果需要带小数点的数字输入，用type="number"配合step="0.01"，iOS和安卓大部分机型会唤起带小数点的数字键盘，同时去掉上下箭头（部分安卓需要加CSS隐藏：input[type="number"]::-webkit-inner-spin-button { display: none; }）。

4. 自定义键盘（终极方案） #

如果以上方案都满足不了你的需求（比如需要输入身份证号带X，或者自定义布局的键盘），那只能自己撸一个自定义键盘组件了：

• 先把输入框的readonly设为true，或者用JS阻止系统键盘弹出；
• 自己写一个包含所需按键的键盘UI；
• 通过JS监听按键点击，把对应字符插入到输入框里。
  这个方案完全可控，就是开发成本高一点，但适合复杂业务场景。

最后说一句：别再迷信type="number"了！它的设计初衷是数值输入（比如年龄、金额），不是纯数字字符串输入（比如手机号、验证码），这就是为什么它经常唤起不合适的键盘。选对type才是解决问题的关键！

内容的提问来源于stack exchange，提问作者MathKimRobin