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

Posted 水星记_

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue实现输入框中输完后光标自动跳到下一个输入框中相关的知识,希望对你有一定的参考价值。

前言

最近接到这么一个需求,做一个安全码的输入框,限制为6位数,但是每一个写入的值都是一个输入框,共计6个输入框,当前输入框写入值后,光标自动跳到下一个输入框中,删除当前输入框写入的值后再自动跳到上一个输入框中。


实现思路

首先我们需要通过 keyup() 事件在用户输入完字符后,利用 document.getElementsByClassName 方法获取到输入框的 dom 元素集合,拿到当前元素的 keyindex 值,通过判断确定光标是否跳到下一个输入框(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实现输入框中输完后光标自动跳到下一个输入框中的主要内容,如果未能解决你的问题,请参考以下文章

java按回车键,光标自动定位到下一个文本框中,

axure7.0如何实现光标在文本框中获得焦点时,文本框内容自动清空。失去焦点时显示默认文字,谢谢!

在输入框中的光标后添加不可编辑的文本

税号输入框 将input框中的输入自动转化成半角大写

在 Microsoft Access 文本框中开始新行

winform 窗体,上面有4个textbox输入框,怎么实现输入框自动跳到下一输入框。