一个input实现六个格子的验证码输入
用多个input处理6个格子时 会出现输出键盘弹来弹去用js控制很麻烦 用一个input简单方便 <div class="pc_in"> <div> <span class="g_hx"></span> <span class="g_hx"></span> <span class="g_hx"></span> <span class="g_hx"></span> <span class="g_hx"></span> <span class="g_hx"></span> </div> <p> <input type="text" v-model="paymentCodeValue" maxlength="6" /> </p> </div>
.pc_in {
position: relative;
float: left;
width: 6.7rem;
height: 1.12rem;
margin-top: 0.92rem;
margin-left: 0.4rem;
div {
display: flex;
width: 100%;
height: 1.12rem;
span {
flex: 1;
height: 200%;
border: #E6E8ED solid 1px;
border-right: none;
margin-top: -0.56rem;
}
span:last-child {
border-right: #E6E8ED solid 1px;
}
}
p {
position: absolute;
width: 7.5rem;
height: 1.12rem;
line-height: 1.12rem;
top: 0;
left: 0;
background: none;
overflow: hidden;
input {
float: left;
width: 120%;
height: 0.8rem;
line-height: 0.8rem;
margin-top: 0.2rem;
@include sc(0.4rem, #000000);
letter-spacing: 0.9rem;
background: none;
text-indent: 0.4rem;
}
}
}
思路:首先在一个div中写出6个格子 再用一个input定位定在这6个格子上面 并关掉默认的背景(用letter-spacing: 0.9rem; 字体间距来实现)
用一个input输入的时候 输入了6个数字 只要能让它能输入第7个数字 就不会出现格式错误的情况
注意点:
1、用来包裹input标签的父标签要做长一点(我用p标签包裹它一定要比自己的父标签要长一点 就是比6个格子要长一点 因为当输入到第6个数字时 如果input的父标签的长度不够时 input里面的数字会自动往左挤 出现格式错乱)
2、input的父标签不要用overflow: hidden; 用一个input就是要让input的数字溢出一点 就是说你输了6个数字可以看到第7个数字的光标(如果溢出隐藏看不到第7个数字的光标则input里面的数字会自动往左挤)
3、我们做的时候 刚输完第6个数字 就去做业务处理 或者让input失去焦点根本就不会出现在页面看到光标的情况