为了账号安全,请及时绑定邮箱和手机立即绑定

移动端键盘定制[优化]

标签:
Html/CSS Html5
前言

移动端由于输入屏幕较小,输入不太方便。如果能够设计出更合理的软键盘,那么就会增加用户的易用性。例如,在输入数字的时候,软键盘中只有数字,而不需要用户自己去切换;在输入密码的时候,关闭自动大写首字母。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"
参考
点击查看更多内容
17人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
4
获赞与收藏
62

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消