vue实现4位数验证码自动聚焦编辑效果

王新新2255

已于 2023-05-05 17:03:59 修改

阅读量935

点赞数 4

文章标签： vue.js 前端

于 2022-06-27 16:53:33 首次发布

本文链接：https://blog.csdn.net/m0_60336681/article/details/125487334

版权

本文介绍如何在Vue.js中实现一个功能，即当用户输入完四位验证码的每一位后，焦点自动跳转到下一位，提供连续输入的流畅体验。

摘要由CSDN通过智能技术生成

需求：连续输入的4位验证码
在这里插入图片描述

<template>
    <div class="container">
      <div class="inputBox">
        <div class="text">输入验证码</div>
        <div>
          <input
            v-for="(item, index) in captchas"
            :key="index"
            v-model="item.num"
            :id="'captcha' + index"
            @input="inputFinish(index)"
            @focus="adjust(index)"
            @keydown="inputDirection(index, $event)"
            class="auth-b"
            type="tel"
            maxlength="1"
          />
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "Ho