实现手机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;
    }

// 鼠标按下事件，这里只能用鼠标按下事件，不要用 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位验证码

猜你喜欢