移动端键盘定制[优化]

前言

移动端由于输入屏幕较小，输入不太方便。如果能够设计出更合理的软键盘，那么就会增加用户的易用性。例如，在输入数字的时候，软键盘中只有数字，而不需要用户自己去切换；在输入密码的时候，关闭自动大写首字母。input标签的type类型就能简单的自定义软键盘。

关键知识点

<input type="number" />

如上代码，在移动端打开此页面，点击这个input，会出来如下软键盘：

<input type="tel" />

如上代码，在移动端打开此页面，点击这个input，会出来如下软键盘：

示例

请手机或者平板打开此页面

总结

• 很多手机都支持tel number search email url，正则除外
• 不支持的话，对样式表现没什么影响，可以放心使用
• 对待输入我们一般都是一路off到底，移动web端input标配属性：

autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false"

参考

• 一丝姐姐的为移动而生的 HTML 属性
• AlloyTeam老教授的分享
• 图片