基于node网站毕设代做,到底建手机网站还是电脑网站,中国建设银行网站进不去,不用代码可以做网站设计吗在移动端#xff0c;我们公司通过输入框主要收集用户的姓名和电话#xff0c;以下是对输入框获取焦点时#xff0c;控制弹出键盘的样式来增强用户体验。 输入姓名 我们的用户都是中国人#xff0c;输入用户名为中文#xff0c;所以弹出键盘是输入中文状态即可#xff0c;…在移动端我们公司通过输入框主要收集用户的姓名和电话以下是对输入框获取焦点时控制弹出键盘的样式来增强用户体验。 输入姓名 我们的用户都是中国人输入用户名为中文所以弹出键盘是输入中文状态即可这个时候type text即可默认状态下一般都是弹出中文输入键盘所以可满足 有图有真相 输入电话/手机 这个需要输入数字所以我们希望它获取焦点时可以弹出数字键盘第一想到的是把type设置为number但是在typenumber时输入框的右侧会出现两个小按钮丑丑的而且点击还可输入负数用户体验不好。 所以我们尝试用样式来去掉这两个小按钮我们设置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[typenumber]::-webkit-outer-spin-button,
input[typenumber]::-webkit-inner-spin-button {-webkit-appearance: none;
} 这样是不是就ok了呢应该是ok的但是当我们需要typenumber的两个小按钮时还没遇到过还必须还原回来所以感觉这种全局重置样式不怎么好。 在网上看到一个方法 这个方法可以很好的替换typenumber的方法而且手机端兼容性很好。 总结 在用input来收集用户信息时姓名输入用text即 input typetext 电话/手机输入用tel即 input typetel 查看demo可扫下面二维码 转载于:https://www.cnblogs.com/hege/p/4991022.html
