效果图
简单说一下原理 ：
1、先创建一个input输入框，定位在在六个小input上面，设置css opacity: 0
2、监听输入隐藏input输入的值，循环显示在6个input里面
3、光标是一个gif图模拟的
上代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>
<style type="text/css">
* {
box-sizing: border-box;
}
.box {
width: 380px;
height: 50px;
background: #999;
position: relative;
}
.inp {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 380px;
height: 50px;
opacity: 0;
}
.input-list-box {
position: relative;
z-index: 8;
width: 100%;
display: flex;
justify-content: space-between;
}
.input-list-box input {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 20px;
font-weight: 800px;
border: 1px solid #999;
}
.input-active {
position: absolute;
z-index:9;
top: 5px;
left: 4px;
width: 3px;
height: 40px;
}
.input-active img {
width: 1px;
height: 100%;
}
</style>
</head>
<body>
<div>
<div>请在下方输入6位数字</div>
<div class="box">
<input type="tel" maxlength="6" class="inp"/>
<div class="input-list-box">
<input type="text" >
<input type="text" >
<input type="text" >
<input type="text" >
<input type="text" >
<input type="text" >
</div>
<div class="input-active">
<img src="https://t.alipayobjects.com/images/rmsweb/T1nYJhXalXXXXXXXXX.gif">
</div>
</div>
</div>
</body>
<script type="text/javascript">
$('.inp').focus()
$('.inp').focus(function(){
var $input = $(".input-list-box input")
var pwd = $(this).val().trim()
var i = pwd.length
if (i >= 6) {
$('.input-active').css('display', 'none')
}else {
$('.input-active').css('display', 'block')
$('.input-active').css('left',$input.eq(i).offset().left + 'px')
}
})
$(".inp").blur(function(){
$('.input-active').css('display', 'none')
});
$(".inp").on("input", function() {
var $input = $(".input-list-box input")
if( /^[0-9]*$/.test($(this).val()) ){//有值只能是数字
var pwd = $(this).val().trim()
for (var i = 0; i < pwd.length; i++) {
$input.eq(i).val(pwd[i])
}
if (i >= 6) {
$('.input-active').css('display', 'none')
}else {
$('.input-active').css('display', 'block')
$('.input-active').css('left',$input.eq(i).offset().left + 'px')
}
$input.each(function() {//将有值的当前input后的所有input清空
var index = $(this).index()
if (index >= pwd.length) {
$(this).val("")
}
});
}else{//清除val中的非数字，返回纯number的value
var arr = $(this).val().match(/[0-9]/g)
if ( !arr ) { //当第一个输入的是非数值 清空输入
$(this).val('')
return
}
// 找到数组中最后一个数值得下标
var num = $(this).val().lastIndexOf(arr[arr.length-1]) + 1
$(this).val($(this).val().slice(0, num))
}
});
</script>
网友评论