实现手机6位验证码

项目背景：vue
实现效果：

问题：因为要获取到验证码内容，所以肯定是要用input，那问题就是如何将数字输入到input框里但是还要显示出输入到了六个小框框里
思路：input标签用v-model双向绑定来获取input的value值，input框要在6个框的上面才能输入内容，但是还不能显示出牛投框，然后在鼠标按下的时候循环输入的内容，使用6个 li 设计出样式，然后将input框中的value循环到 li 中显示

上代码：
结构

<input type="number" id="smsCode" v-model="loginInfo.sms" maxlength="6" @keyUp="handleGetSms">
<ul class="dvCode">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

css

input {
border: none;
width: 6.4rem;
display: block;
margin: 0 auto;
z-index: 100;
// 为了可以在li的上面显示，可以输入内容
position: relative;
opacity: 0;
// 在上面显示但是又要隐藏
color: transparent;
// 隐藏光标
letter-spacing: 0.5rem;
padding-left: 0.4rem;
-webkit-appearance: none;
}
.dvCode {
width: 6.2rem;
height: 0.9rem;
display: flex;
justify-content: space-around;
position: absolute;
bottom: 0;
left: 0.54rem;
6位框的样式
li {
width: 0.9rem;
border: 0.02rem solid #EEEEEE;
height: 0.9rem;
text-align: center;
font-size: 0.7rem;
line-height: 0.9rem;
}

js

// 鼠标按下事件，这里只能用鼠标按下事件，不要用 keyDown 因为会慢一个节奏，自己试试就知道了
handleGetSms () {
var liObj = document.querySelectorAll('.dvCode>li');
for (var i = 0;i<liObj.length;i++) {
liObj[i].innerHTML = this.loginInfo.sms.charAt(i)
}
if (this.loginInfo.sms.length == 0) {
document.querySelector('.loginEnterBtn').style.opacity = 0.5;
} else {
document.querySelector('.loginEnterBtn').style.opacity = 1;
}
}

*** 希望我的文章对您有帮助

最后

以上就是温暖西装为你收集整理的实现手机6位验证码的全部内容，希望文章能够帮你解决实现手机6位验证码所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。