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>

實現效果

到此，相信大家對“vue輸入框怎么實現輸完后光標自動跳到下一個輸入框中”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！