使用inputmode改变移动端键盘弹出的类型

---

前言

使用原因：需求是同时兼容移动端和PC端的输入，输入框数量多且绑定不同的对象，原本考虑使用vantUI的数字键盘，但是实际使用起来问题比较多，偶然间发现了inputmode这个属性，它可以改变移动端唤起拟态键盘的方式。

可以直接查看官网说明

提示：以下是本篇文章正文内容，下面案例可供参考

一、inputmode是什么？

inputmode是一个HTML全局属性(全局属性对所有 HTML 元素都是通用的)，它提供了用户在编辑元素或其内容时可能输入的数据类型，即它可以帮助具有键盘的浏览器或设备，在可输入元素获取焦点时决定显示那种虚拟键盘。

二、它有那些属性

2.1 none

当值为none的时候，不会唤起键盘。这用于浏览器或任何应用程序自行处理虚拟键盘的情况。

2.2 text(默认值)

标准键盘

2.3 numeric

当值为numeric的时候，键盘上应显示从 0 到 9 的数字。 “减号”键可能显示也可能不显示。

2.4 decimal

当值为decimal的时候，键盘上必须显示十进制分隔符(“.” 或 “,”)以及从 0 到 9 的数字。 “减号”键可能显示也可能不显示。

2.5 tel

当值为tel的时候，键盘上应显示数字 以及井号 () 和星号 () 键。这用于输入电话号码。

2.6 search

当值为search的时候， 键盘上应具有便于搜索的布局，这样的布局具有标记为 “Search” 或任何搜索图标或类似图标的 “Enter” 键。

2.7 email

当值为email的时候，键盘必须显示 “@” 字符，这将方便用户输入电子邮件。

2.8 url

当值为url的时候，键盘必须显示 “/” 字符，这将有助于用户输入 URL。

三、需要注意

WHATWG(超文本应用技术工作组) 规范中列出了 inputmode, 并且现代浏览器正在努力支持它。但 W3C HTML 5.2 规范 不再将其列出（也就是说将其标记为过时的）。在达成共识之前，你应该认为 WHATWG 规范定义的就是正确的。

即使是同一部手机使用不同的输入法也会导致唤起的键盘有差异

四、兼容