验证码输入（6个方格）、可自动聚焦下一个、输入长度达到6位数触发相关处理逻辑

软糖宝贝丶

已于 2024-08-31 17:09:10 修改

阅读量259

点赞数 4

文章标签：前端 javascript css

于 2024-08-30 15:34:37 首次发布

本文链接：https://blog.csdn.net/weixin_61975247/article/details/141718772

版权

想不想要验证码方格的实现效果？回答：想~哈哈哈

应用场景：方格验证码输入，这里用的框架是iView的输入框，大家可自行改为自己项目框架的输入框标签！

实现思路：循环多个输入框，将输入框样式修改为合适大小的正方形，在@input里进行相关逻辑处理。

<div class="verification-code-input">
   <Input v-for="(item, index) in codeLength" :key="index" class="code-input-item" maxlength="1" @input="(event) => handleInput(event, index)" ref="codeInput" />
</div>

CSS：样式设置为适合自己的方格

.verification-code-input {
   display: flex;
   justify-content: space-between;
   margin-top: 34px;

   /deep/.ivu-input {
     width: 74px;
     height: 74px;
     font-size: 32px;
     font-weight: bold;
     padding: 27px;
   }

   .code-input-item {
     max-width: 100%;
     margin: 0;
     padding: 0;
     text-align: center;
   }
 }

Data中定义相关变量：


  data() {
    return {
      oathCode: '',
      codeLength: 6, // 设置验证码的长度
    }
  }

JS：这里处理输入框的自动聚焦到下一个，输入框输入、输出的逻辑等

methods: {
    handleInput(event, index) {
      let inputValue = event;
      if (inputValue) {
        // 如果是正常输入
        if (this.oathCode.length === index) {
          if (this.oathCode.length < this.codeLength && index + 1 < this.$refs.codeInput.length) {
            this.$refs.codeInput[index + 1].focus();
          }
          this.oathCode += inputValue;
        } else {
          if (this.oathCode.length < this.codeLength && index + 1 < this.$refs.codeInput.length) {
            this.$refs.codeInput[index + 1].focus();
          }
          this.$refs.codeInput[index + 1].focus();
          // 如果是修改操作
          this.oathCode = this.oathCode.slice(0, index) + inputValue + this.oathCode.slice(index + 1);
        }
      } else {
        if (this.oathCode.length > index && index > 0) {
          this.oathCode = this.oathCode.slice(0, index) + this.oathCode.slice(index + 1);
          this.$nextTick(() => {
            if (this.$refs.codeInput[index - 1]) {
              this.$refs.codeInput[index - 1].focus();
            }
          });
        }
      }
      this.form.currencyCode = this.userCurrency.code;
      this.form.emailCode = this.oathCode;
      if (this.oathCode.length === this.codeLength) {
        //这里是判断输入验证码为6位数完成之后的操作，例如注册、登录逻辑处理
      }
    },
}

附带视频效果，欢迎大家来交流，哇哈哈哈......

验证码输入框效果视频