vue輸入框怎么實(shí)現(xiàn)輸完后光標(biāo)自動(dòng)跳到下一個(gè)輸入框中

本篇內(nèi)容主要講解“vue輸入框怎么實(shí)現(xiàn)輸完后光標(biāo)自動(dòng)跳到下一個(gè)輸入框中”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue輸入框怎么實(shí)現(xiàn)輸完后光標(biāo)自動(dòng)跳到下一個(gè)輸入框中”吧!

實(shí)現(xiàn)思路

首先我們需要通過 keyup() 事件在用戶輸入完字符后，利用 document.getElementsByClassName 方法獲取到輸入框的 dom 元素集合，拿到當(dāng)前元素的 key 和 index 值，通過判斷確定光標(biāo)是否跳到下一個(gè)輸入框（focus）還是光標(biāo)失焦（blur）;keydown() 事件主要就是為了防止一旦輸入過快，一個(gè)輸入框中會(huì)有多個(gè)字符的問題。 本章用到的屬性以及方法如下：

focus()

focus() 當(dāng)元素獲得焦點(diǎn)時(shí)（當(dāng)通過鼠標(biāo)點(diǎn)擊選中元素或通過 tab 鍵定位到元素時(shí)），發(fā)生 focus 事件。focus() 方法觸發(fā) focus 事件，或規(guī)定當(dāng)發(fā)生 focus 事件時(shí)運(yùn)行的函數(shù)。

blur()

當(dāng)元素失去焦點(diǎn)時(shí)發(fā)生 blur 事件。blur() 方法觸發(fā) blur 事件，或規(guī)定當(dāng)發(fā)生 blur 事件時(shí)運(yùn)行的函數(shù)。

keyup()

keyup() 方法觸發(fā) keyup 事件，或規(guī)定當(dāng)發(fā)生 keyup 事件時(shí)運(yùn)行的函數(shù)。

keydown()

當(dāng)鍵盤鍵被按下時(shí)觸發(fā) keydown 事件。需要注意的是 keydown() 是在鍵盤按下觸發(fā)，而 keyup() 是在鍵盤松手就會(huì)觸發(fā)。

document.getElementsByClassName()

getElementsByClassName() 方法返回文檔中所有指定類名的元素集合，作為 NodeList 對(duì)象。NodeList 對(duì)象代表一個(gè)有順序的節(jié)點(diǎn)列表。NodeList 對(duì)象 我們可通過節(jié)點(diǎn)列表中的節(jié)點(diǎn)索引號(hào)來訪問列表中的節(jié)點(diǎn)(索引號(hào)由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 {
      // 輸入框循環(huán)的數(shù)組
      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();
        }
      }
    },
    // 鍵盤按下觸發(fā)
    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>

實(shí)現(xiàn)效果

到此，相信大家對(duì)“vue輸入框怎么實(shí)現(xiàn)輸完后光標(biāo)自動(dòng)跳到下一個(gè)輸入框中”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！