小程序自定义或者是一个六位密码框||验证码框、隐藏input闪烁光标。

小程序自定义一个六位密码框|验证码框：
实现了密码框 | 验证码框功能：
（1）隐藏了input闪烁光标的问题（这里做好了用手机调试一下）。
（2）只有长度是6 的时候按钮才能点击。
（3）输入键盘自动弹起，保持键盘不收起。
（4）。。。。。
其实思路就是：
1、设定六个小的input框：这只是展示的框，不做任何的操作，只是用来接收数据。
2、再设定一个input框（这是真正的输入数据），绝对定位到六个input框上面，这个框的样式给它透明掉，同时输入的数据最大长度设置是6。这样就实现了这输入的六个数据正好放到那六个小input框里面。

代码如下：我用的是wepy框架
标红的地方自认为就是最应该注意地方。。。

data;数据
data = {
isBtn: true,
isfocus: false,
isFocus: false,
allIsShow: true,
inputSigle: [],
inputTruely: ‘’,
allinput: ‘’,
rotateData: ‘’
}
方法：
fechPass() {
this.allIsShow = false;
},
passInput(e) {
var that = this;
var value = e.detail.value;
var num = e.detail.cursor - 1;
var inputSigle = [];
for (let i = 0; i <= num; i++) {
inputSigle.push(value.substring(i, i + 1));
}
if(inputSigle.length !== 0) {
this.isFocus = true
}
if (inputSigle.length >= 6) {
this.isBtn = false;
that.inputSigle = inputSigle;
that.allinput = value;
} else {
that.inputSigle = inputSigle;
that.allinput = ‘’;
this.isBtn = true;
}
},
// 点击关闭密码框
closeBox() {
this.allIsShow = false;
},
show() {
this.allIsShow = true;
},
样式：
.button-pass {
width: 50%;
height: 30rpx;
text-align: center;
margin: 10rpx auto;
}
.pass-box {
font-size: 26rpx;
color: #333;
width: 640rpx;
text-align: center;
margin-top: 40rpx;
height: 400rpx;
position: fixed;
left: 50%;
top: 30%;
transform: translate(-50%, -50%);
border: 2rpx #d1d1d1 solid;
background: #fff;
opacity: 0.9;
}
.pass-inentify {
margin-top: 100rpx;
}
.icod-pass {
margin-top: 80rpx;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.icod-pass-in {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 10;
}
.icod-pass-input {
width: 70rpx;
height: 70rpx;
border: 4rpx #bfbfbf solid;
display: flex;
justify-content: center;
align-items: center;
margin-right: 8rpx;
}
.input-focus {
width: 200%;
}
.indexTopInput {
position: absolute;
color: transparent;
height: 100%;
opacity: 0;
z-index: 100;
left: 0rpx;
}
.input-line {
opacity: 0;
z-index: 999;
outline: none;
border: none;
color: transparent;
}
.closeBtn {
position: absolute;
right: 20rpx;
top: 10rpx;
width: 80rpx;
height: 60rpx;
text-align: right;
color: #999;
}
这红框的地方就是处理闪烁光标问题。我设置了一个判断，初始进来的时候有闪烁光标。然后输入数据存在就隐藏光标。实现方式就是让这个光标离开显示区域。。。。完美！！
.input-focus {
width: 200%;
}