扫码关注官方订阅号
如图，怎么用html、css、js来实现这种输入框？
后面的线可以作为背景图片。。。。输入的时候控制字符间距
想到三个方法：一：用背景图片来做，在整个input后面加个背景（包含那个线），然后设置input的css的 letter-space 来调整字符之间的间距。二：在包含输入框的外层容器内加一个p，在里面做处理之后吧她绝对定位到input的下层。三：把一个输入框拆成6个，然后设置border-right，在拼装起来
先看效果吧：只能输入数字，输入字母会有弹窗提示在线点这里讲一下我的思路：布局上：
这几个输入框我用的是span模拟的，把正在输入的项的contenteditable属性设为true
输入过的项的内容都变成小黑点，这里我用的是伪元素来模拟黑点，并绝对定位到正中心
每个小输入框都设置box-sizing:border-box,计算好边框的宽度和盒子的高度js
其实主要就是有两点：
设置activeIndex，代表正在聚焦的项的位置
输入密码，判断是否是数字，activeIndex++
存储输入过的数字，然后切换到下一个输入框，把下一个输入框变成可输入，其他的均不可输入
上一个输入过的添加伪类circle，输入过的变成小黑点
判断边界值，到达边界后，keyup事件不再执行任何函数
删除的时候，activeIndex--,存储的数据中删除此项，注意：在火狐浏览器中，按下backspace键也会激发keypress事件，所以在keypress中我们要判断下keyCode
IE下面也不行，IE不支持addEventListener
在IOS上有问题，光标一直不动。
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
0 
6
786
收藏
后面的线可以作为背景图片。。。。输入的时候控制字符间距
想到三个方法：
一：用背景图片来做，在整个input后面加个背景（包含那个线），然后设置input的css的 letter-space 来调整字符之间的间距。
二：在包含输入框的外层容器内加一个p，在里面做处理之后吧她绝对定位到input的下层。
三：把一个输入框拆成6个，然后设置border-right，在拼装起来
先看效果吧：只能输入数字，输入字母会有弹窗提示
在线点这里
讲一下我的思路：
布局上：
这几个输入框我用的是span模拟的，把正在输入的项的contenteditable属性设为true
输入过的项的内容都变成小黑点，这里我用的是伪元素来模拟黑点，并绝对定位到正中心
每个小输入框都设置box-sizing:border-box,计算好边框的宽度和盒子的高度
js
其实主要就是有两点：
设置activeIndex，代表正在聚焦的项的位置
输入密码，判断是否是数字，activeIndex++
存储输入过的数字，然后切换到下一个输入框，把下一个输入框变成可输入，其他的均不可输入
上一个输入过的添加伪类circle，输入过的变成小黑点
判断边界值，到达边界后，keyup事件不再执行任何函数
删除的时候，activeIndex--,存储的数据中删除此项，
注意：在火狐浏览器中，按下backspace键也会激发keypress事件，所以在keypress中我们要判断下keyCode
IE下面也不行，IE不支持addEventListener
在IOS上有问题，光标一直不动。