JS如何实现手机端输入验证码效果

之前在“掘金”上看到这样一个demo 我觉得很有意思，于是今天把它搬下来，记在自己的“小本本”里
也许会对以后的项目有点用，若要自己去实现这样一个案例也能实现，但是可能没有那么“妙”。

想法：

1、使用label标签做显示验证码的框，

2、然后每个label for属性指向同一个 id 为vcode 的input，

3、为了能够触发input焦点， 将input 改透明度样式隐藏，

4、这样就实现了 点击label触发 input焦点，调用键盘。

运行效果：

示例代码：

结构部分html：

  
验证码:
  
    

    
    
  

css部分：

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #ffffff;
      font-family: -apple-system, PingFang SC, Hiragino Sans GB, Helvetica Neue, Arial;
      -webkit-tap-highlight-color: transparent;
    }
    .app {
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 60px;
      max-width: 320px;
      margin-left: auto;
      margin-right: auto;
    }
    .heading-2 {
      color: #333333;
    }
    .v-code {
      margin-top: 20px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      position: relative;
      width: 280px;
      margin-left: auto;
      margin-right: auto;
    }
    .v-code input {
      position: absolute;
      top: 200%;
      opacity:0;
    }
    .v-code .line {
      position: relative;
      width: 40px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      font-size: 28px;
    }
    .v-code .line::after {
      display: block;
      position: absolute;
      content: '';
      left: 0;
      width: 100%;
      bottom: 0;
      height: 1px;
      background-color: #aaaaaa;
      transform: scaleY(.5);
      transform-origin: 0 100%;
    }
    .v-code .line.animated::before {
      display: block;
      position: absolute;
      left: 50%;
      top: 20%;
      width: 1px;
      height: 60%;
      content: '';
      background-color: #333333;
      animation-name: coruscate;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-fill-mode: both;
    }
    @keyframes coruscate {
      0% {
 opacity: 0
      }
      25% {
 opacity: 0
      }
      50% {
 opacity: 1
      }
      75% {
 opacity: 1
      }
      to {
 opacity: 0
      }
    }
  

Javascript部分

1、通过CDN引入vue.js

2、代码

var app = new Vue({
    el: '#app',
    data: {
      code: '',
      codeLength: 6,
      telDisabled: false,
      focused: false
    },
    computed: {
      codeArr() {
 return this.code.split('')
      },
      cursorIndex() {
 return this.code.length
      }
    },
    watch: {
      code(newVal) {
 this.code = newVal.replace(/[^d]/g,'')
 if (newVal.length > 5) {
   // this.telDisabled = true
   this.$refs.vcode.blur()
   setTimeout(() => {
     alert(`vcode: ${this.code}`)
   }, 500)
 }
      }
    },
  })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。