vue输入框怎么实现输完后光标自动跳到下一个输入框中

本篇内容主要讲解“vue输入框怎么实现输完后光标自动跳到下一个输入框中”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue输入框怎么实现输完后光标自动跳到下一个输入框中”吧!

实现思路

首先我们需要通过

keyup()

事件在用户输入完字符后，利用

document.getElementsByClassName

方法获取到输入框的

dom

元素集合，拿到当前元素的

key

和

index

值，通过判断确定光标是否跳到下一个输入框（

focus

）还是光标失焦（

blur

）;

keydown()

事件主要就是为了防止一旦输入过快，一个输入框中会有多个字符的问题。 本章用到的属性以及方法如下：

focus()

focus()

当元素获得焦点时（当通过鼠标点击选中元素或通过

tab

键定位到元素时），发生

focus

事件。

focus()

方法触发

focus

事件，或规定当发生

focus

事件时运行的函数。

blur()

当元素失去焦点时发生

blur

事件。

blur()

方法触发

blur

事件，或规定当发生

blur

事件时运行的函数。

keyup()

keyup()

方法触发

keyup

事件，或规定当发生

keyup

事件时运行的函数。

keydown()

当键盘键被按下时触发

keydown

事件。需要注意的是

keydown()

是在键盘按下触发，而

keyup()

是在键盘松手就会触发。

document.getElementsByClassName()

getElementsByClassName()

方法返回文档中所有指定类名的元素集合，作为

NodeList

对象。

NodeList

对象代表一个有顺序的节点列表。

NodeList

对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

完整源码

<template>
  <div class="parentBox">
    <div v-for="(item, index) in inputList" :key="index">
      <input type="text" v-model="item.pinless" class="inputValue" @keyup="keyboard($event, index)" @keydown="expurgate(index)" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 输入框循环的数组
      inputList: [
        { pinless: "" },
        { pinless: "" },
        { pinless: "" },
        { pinless: "" },
        { pinless: "" },
        { pinless: "" },
      ],
    };
  },
  methods: {
    // 键盘松开事件
    keyboard(e, index) {
      let domNode = document.getElementsByClassName("inputValue"),
        currInput = domNode[index],
        nextInput = domNode[index + 1],
        lastInput = domNode[index - 1];
      if (e.keyCode != 8) {
        if (index < this.inputList.length - 1) {
          nextInput.focus();
        } else {
          currInput.blur();
        }
      } else {
        if (index != 0) {
          lastInput.focus();
        }
      }
    },
    // 键盘按下触发
    expurgate(index) {
      this.inputList[index].pinless = "";
    },
  },
};
</script>
<style scoped>
.parentBox {
  padding: 20px;
  display: flex;
}
.parentBox div:nth-child(n + 2) {
  margin-left: 4px;
}
input {
  color: #606266;
  font-size: 18px;
  text-align: center;
  width: 54px;
  height: 62px;
  border: 2px solid gainsboro;
  border-radius: 4px;
}
</style>

实现效果