html5 微信原生登录,用HTML5实现微信密码输入框

效果图

简单说一下原理 ：

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: 5