前言
使用原因:需求是同时兼容移动端和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 规范定义的就是正确的。
即使是同一部手机使用不同的输入法也会导致唤起的键盘有差异文章来源:https://www.toymoban.com/news/detail-594693.html
四、兼容
文章来源地址https://www.toymoban.com/news/detail-594693.html
到了这里,关于使用inputmode改变移动端键盘弹出的类型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!