效果图

简单说一下原理 ：

1、先创建一个input输入框，定位在在六个小input上面，设置css opacity: 0

2、监听输入隐藏input输入的值，循环显示在6个input里面

3、光标是一个gif图模拟的

上代码

* {

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%;

}

$('.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))

}

});