最近做一个H5的页面,里面有个输入验证码交互,就是移动端比较常见的那种验证码输入交互。就是那种,对,就是那种,一个数字一个下划线,移动端非常常见的那种验证码交互。实现过程中主要参考了美团外卖安卓端的具体交互。 应用到项目中的效果如下。 一般操作: 粘贴效果: 方案选择 方案1:调整文字的间距 设置 input 的 letter-spacing 属性,我们就可以让验证码之间有足够大的空隙,然后再把底线改为有间隔的多个线段貌似就可以了。 然而,这里会有一个问题。就是光标总是会在数字的左边,而我们希望的是输入后的数字的中心位于原来光标的位置。最终我放弃了这个方案。 显然,这个方案并不合适。 方案
评论星级较低,若资源使用遇到问题可联系上传者,3个工作日内问题未解决可申请退款~