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

更新時(shí)間：2023年03月07日 09:25:32 作者：水星記_

最近在工作中遇到了些問題,總結(jié)下分享給同樣遇到這個(gè)問題的朋友,這篇文章主要給大家介紹了關(guān)于vue輸入框中輸完后光標(biāo)自動(dòng)跳到下一個(gè)輸入框中的實(shí)現(xiàn)方法,需要的朋友可以參考下

前言

最近接到這么一個(gè)需求，做一個(gè)安全碼的輸入框，限制為6位數(shù)，但是每一個(gè)寫入的值都是一個(gè)輸入框，共計(jì)6個(gè)輸入框，當(dāng)前輸入框?qū)懭胫岛?，光?biāo)自動(dòng)跳到下一個(gè)輸入框中，刪除當(dāng)前輸入框?qū)懭氲闹岛笤僮詣?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)效果

總結(jié)

到此這篇關(guān)于vue輸入框中輸完后光標(biāo)自動(dòng)跳到下一個(gè)輸入框中的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)vue輸入框輸完自動(dòng)跳到下個(gè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: