手机端自定义数字小键盘设计与实现
手机端页面的数字输入需求啊，多场景还真离不开它，比如填金额、输验证码、输手机号。这类场景下，系统自带的数字键盘不一定给力，比如不能控制小数点的位数，界面也跟你设计风格差一截。自己搞个type="number"或者type="tel"输入框吧，看似简单，细节多着呢。
自定义的数字小键盘，其实就是用HTML搭个数字按钮布局，CSS搞定样式，再用JavaScript搞定输入逻辑。布局一般是 3×4 那种，0-9 加个小数点，还有清除和确认按钮。小数点要管着——最多出现一次，不然用户一顿乱点就尴尬了。
样式上可以自己玩花样，比如圆角按钮、按下有反馈、字体大一点，手指按着舒服些。用flex 布局或者grid都挺顺，响应也快，media queries配合下，小屏大屏都能 hold 住。
逻辑部分是重点。每个按钮点击后要插入字符，限制小数点、限制最多输入两位小数，这些都可以用正则配合判断。清除、删除、确认也要有，一般绑定到独立按钮，体验会好多。
输入框最好用readonly属性，不让系统键盘弹出来，全靠你自定义的键盘来输入，体验统一，避免冲突。还可以加个mask或者提示语，用户更容易明白该输啥。
哦对了，兼容性也得测试下。大部分现代移动浏览器没啥问题，但你要是在老安卓机上跑，也许就得注意下事件绑定和样式兼容了。
如果你经常做移动端表单相关的交互，建议封装成个可复用的组件。下次用就直接引入，效率高多了。
文件大小：2.09KB
评论区