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

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

想法：

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

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

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

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

运行效果：

示例代码：

结构部分html：

  
验证码:
  

    

    
    
  

css部分：

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)
        }
      }
    },
  })

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