input六位验证码，输入自动跳到下一格，删除自动回退到上一格

本文链接：https://blog.youkuaiyun.com/qq_35227244/article/details/136474538

本文讲述了在开发桌面应用时，如何设计一个美观且功能性的六位验证码输入界面，包括输入框的布局、数字字母校验、光标自动跳转以及删除键操作的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做桌面应用时页面要求输入六位验证码进行验证，UI设计出来是6个独立格子要求输入数字和字母，当用户输入数字/字母，光标自动跳到下一格，删除时光标要退回上一格。 卑微前端提出验证码换成横线输入，结果惨败，好吧确实格子好看…555，开始研究光标定位

1. 先在页面摆六个输入框

<template>
<div>
 <el-form :model="validForm" ref="validForm">
      <el-row style="margin-bottom: 4px; margin-left: 5px">
        <el-col :span="4">
          <el-input
            ref="num1"
            v-model="validForm.num1"
          >
          </el-input>
        </el-col>
        <!-- 再重复几次 -->
       </el-row>
    </el-form>
    <el-button type="primary" :disabled="fullCode.length == 0" @click="save">确定</el-button>
 </div>
</template>
<script>
export default {
  data() {
    return {
      validForm: {
        num1: '',
        num2: '',
        num3: '',
        num4: '',
        num5: '',
        num6: '',
      },
    }
  },
  computed: {
    // 验证码拼接
    fullCode() {
      return (
        this.validForm.num1 +
        this.validForm.num2 +
        this.validForm.num3 +
        this.validForm.num4 +
        this.validForm.num5 +
        this.validForm.num6
      )
    },
  },
    //方法集合
  methods: {
   save() {
      console.log(this.fullCode)
    },
  }
}
</script>

2. 输入框校验

一位数字或者大写字母

 oninput="value = value.replace(/[^\w]/g, '').replace(/(\w{1})\w*/, '$1').toUpperCase()"
 @blur="validForm.num5 = $event.target.value"

3. 键盘抬起时光标移动

3.1 input 键盘事件监听

除了最后一个input外，都需加上键盘监听处理函数 jumpTo
注意：使用elementUI这里要加.native；使用elementPlus不用加

 @keyup="jumpTo('后一个格子的refName', $event)"   // 适用于vue3.X + elementPlus 
 @keyup.native="jumpTo('后一个格子的refName', $event)"  //  加.native 适用于vue2.X + elementui

3.2 键盘监听处理函数

 jumpTo(value, e) {
      if (e.keyCode >= 48 && e.keyCode <= 57) this.$refs[value].focus()
      else if (e.keyCode >= 97 && e.keyCode <= 122) this.$refs[value].focus()
      else if (e.keyCode >= 65 && e.keyCode <= 90) this.$refs[value].focus()
    },

4. 键盘删除键抬起时光标移动

4.1 input 键盘监听删除

除了第一个input外，都需加上键盘监听处理函数 goBack

 @keyup.delete.native="goBack('前一个格子的refName')"

4.2 删除按键处理函数

  goBack(value) {
      this.$refs[value].focus()
    },