在移动端,我们公司通过输入框主要收集用户的姓名和电话,以下是对输入框获取焦点时,控制弹出键盘的样式来增强用户体验。
输入姓名
我们的用户都是中国人,输入用户名为中文,所以弹出键盘是输入中文状态即可,这个时候type = 'text'即可,默认状态下一般都是弹出中文输入键盘,所以可满足
有图有真相
输入电话/手机
这个需要输入数字,所以我们希望它获取焦点时可以弹出数字键盘,第一想到的是把type设置为number,但是在type=number时输入框的右侧会出现两个小按钮,丑丑的,而且点击还可输入负数,用户体验不好。 所以我们尝试用样式来去掉这两个小按钮,我们设置webkit的-webkit-inner-spin-button属性以及-webkit-outer-spin-button属性,都设置为-webkit-appearance: none即可。大概样式是这样的
类名::-webkit-inner-spin-button { -webkit-appearance: none; } 类名::-webkit-outer-spin-button { -webkit-appearance: none; }
这样可以去掉两个小按钮,但这样一个一个设置太麻烦,所以第二种修改方案是:
input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; }
这样是不是就ok了呢?应该是ok的,但是当我们需要type=number的两个小按钮时(还没遇到过),还必须还原回来!所以感觉这种全局重置样式不怎么好。
在网上看到一个方法 这个方法可以很好的替换type="number"的方法,而且手机端兼容性很好。
总结
在用input来收集用户信息时:
姓名输入用text即
<input type="text">
电话/手机输入用tel即
<input type="tel">
查看demo可扫下面二维码