欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2023年03月07日 09:25:32   作者:水星記_  
最近在工作中遇到了些問(wèn)題,總結(jié)下分享給同樣遇到這個(gè)問(wèn)題的朋友,這篇文章主要給大家介紹了關(guān)于vue輸入框中輸完后光標(biāo)自動(dòng)跳到下一個(gè)輸入框中的實(shí)現(xiàn)方法,需要的朋友可以參考下

前言

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

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

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

focus()

focus() 當(dāng)元素獲得焦點(diǎn)時(shí)(當(dāng)通過(guò)鼠標(biāo)點(diǎn)擊選中元素或通過(guò) 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)鍵盤(pán)鍵被按下時(shí)觸發(fā) keydown 事件。需要注意的是 keydown() 是在鍵盤(pán)按下觸發(fā),而 keyup() 是在鍵盤(pán)松手就會(huì)觸發(fā)。

document.getElementsByClassName()

getElementsByClassName() 方法返回文檔中所有指定類(lèi)名的元素集合,作為 NodeList 對(duì)象。NodeList 對(duì)象代表一個(gè)有順序的節(jié)點(diǎn)列表。NodeList 對(duì)象 我們可通過(guò)節(jié)點(diǎn)列表中的節(jié)點(diǎn)索引號(hào)來(lái)訪(fǎng)問(wèn)列表中的節(jié)點(diǎn)(索引號(hào)由0開(kāi)始)。

完整源碼

<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: {
    // 鍵盤(pán)松開(kāi)事件
    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();
        }
      }
    },
    // 鍵盤(pán)按下觸發(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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue3獲取和操作DOM元素的項(xiàng)目實(shí)踐

    Vue3獲取和操作DOM元素的項(xiàng)目實(shí)踐

    在Vue3中,有時(shí)我們需要直接操作DOM節(jié)點(diǎn),本文主要介紹了Vue3獲取和操作DOM元素的項(xiàng)目實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-08-08
  • 淺談Vue3 Composition API如何替換Vue Mixins

    淺談Vue3 Composition API如何替換Vue Mixins

    這篇文章主要介紹了淺談Vue3 Composition API如何替換Vue Mixins,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • vue中同步方法的實(shí)現(xiàn)

    vue中同步方法的實(shí)現(xiàn)

    這篇文章主要介紹了vue中同步方法的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • VUE3基于vite封裝條形碼和二維碼組件的詳細(xì)過(guò)程

    VUE3基于vite封裝條形碼和二維碼組件的詳細(xì)過(guò)程

    基礎(chǔ)組件開(kāi)發(fā)是項(xiàng)目業(yè)務(wù)開(kāi)發(fā)的基石, 本文主要介紹了通過(guò)vue3的vite腳手架快速搭建項(xiàng)目, 開(kāi)發(fā)條形碼和二維碼組件的過(guò)程,感興趣的朋友跟隨小編一起看看吧
    2023-08-08
  • vue-resource攔截器設(shè)置頭信息的實(shí)例

    vue-resource攔截器設(shè)置頭信息的實(shí)例

    下面小編就為大家?guī)?lái)一篇vue-resource攔截器設(shè)置頭信息的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-10-10
  • vue2 中如何實(shí)現(xiàn)動(dòng)態(tài)表單增刪改查實(shí)例

    vue2 中如何實(shí)現(xiàn)動(dòng)態(tài)表單增刪改查實(shí)例

    本篇文章主要介紹了vue2 中如何實(shí)現(xiàn)動(dòng)態(tài)表單增刪改查實(shí)例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • vue中對(duì)token有效期的深入理解

    vue中對(duì)token有效期的深入理解

    本文主要介紹了vue中對(duì)token有效期的深入理解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • Vue中Object.defineProperty用法示例

    Vue中Object.defineProperty用法示例

    Vue中的Object.defineProperty是一個(gè)比較重要的方法,它是可以定義對(duì)象中屬性的一個(gè)方法,相比于在對(duì)象中直接定義的對(duì)象,它更具有靈活性,本文將通過(guò)代碼示例給大家簡(jiǎn)單介紹一下Vue中的Object.defineProperty,需要的朋友可以參考下
    2023-08-08
  • vue中使用mxgraph的方法實(shí)例代碼詳解

    vue中使用mxgraph的方法實(shí)例代碼詳解

    這篇文章主要介紹了vue中使用mxgraph的方法實(shí)例代碼詳解,需要的朋友可以參考下
    2019-05-05
  • Vue的Flux框架之Vuex狀態(tài)管理器

    Vue的Flux框架之Vuex狀態(tài)管理器

    本文內(nèi)容主要參考官方教程,為了方便理解,用更加通俗的文字講解Vuex,也原文內(nèi)容做一些重點(diǎn)引用。希望會(huì)對(duì)你有所幫助。
    2017-07-07

最新評(píng)論