【Vue】Vue表单回车事件下一个input获取焦点

Z时代
2024-01-10
分类：技术分享

动态生成的一组input,触发enter事件后怎么focus下一个input

<li class="border-none" v-for="(item,index) in prcHdAreaList" :key="item.pmcKeyVal">
<input
:ref="item.pmcKeyVal"
v-focus-next-on-enter="'item.pmcKeyVal'"
name="item.phaRate" class="cus_input"
v-model.trim="item.phaRate" type="number"/>
</li>
Vue.directive('focusNextOnEnter', {
bind: function(el, {value}, vnode) {
el.addEventListener('keyup', (ev) => {
if (ev.keyCode === 13) {
let nextInput = vnode.context.$refs[value]
if (nextInput && typeof nextInput.focus === 'function') {
nextInput.focus()
nextInput.select()
}
}
})
}
})

回答

经过我几个小时的尝试，使用自定义指令实现了该需求，没有使用任何原生的DOM操作和插件，直接使用了vue提供的方法实现的。

具体代码(直接复制粘贴便可看到效果，重要地方都做了注释)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
    <ul>
      <li v-for="(item,index) in inputs">
        <input type="text" v-model="item.val" v-focus="focusIndex === index"  @keyup.enter="nextFocus(index)">
      </li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  // 注册一个全局自定义指令 `v-focus`
  Vue.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el,obj) {  //这是需要页面刚加载就能进行聚焦操作使用的钩子函数,可以省略的，视具体需求而定
      //console.log(obj);
      if(obj.value) { //对值进行判断
        // 聚焦元素
        el.focus()        
      }
    },
    // 当指令所在组件的 VNode 及其子 VNode 全部更新后调用
    componentUpdated: function(el,obj) {  //这是每当绑定的值发生改变时触发的钩子函数
      //console.log(obj);  //可以打印看一下
      if(obj.value) {
        el.focus()        
      }
    }
  })
  new Vue({
      el: "#app",
      data() {
        return {
          focusIndex: 0, //用来存放下一个应该聚焦的index值
          inputs: [{
            val: 1
          },{
            val: 2
          },{
            val: 3
          },{
            val: 4
          }]
        }
      },
      methods: {
        nextFocus(index) {
          return this.focusIndex = index + 1;
        }
      }
  });
</script>
</body></html>

希望我的回答对你有所帮助！^_^^_^ 不足之处，欢迎批评指正！

直接上代码吧- 动态数据，动态获取，动态焦点--ohye
【Vue】Vue表单回车事件下一个input获取焦点

<template>
  <ul>
    <li v-for="product in products">
      {{ product.title }} - {{ product.price | currency }}
      <br>
      <input 
      type="text" 
      :value='product.title'
      :ref='"nnnn"+product.id'
      @keyup.enter="(e)=>doneEdit('nnnn'+product.id)"
      ></input>
      <button
        :disabled="!product.inventory"
        @click="addProductToCart(product)">
        Add to cart
      </button>
    </li>
  </ul>
</template>
<script>
const allproducts = [
  {"id": 1, "title": "iPad 4 Mini111", "price": 500.01, "inventory": 2},
  {"id": 2, "title": "H&M T-Shirt White", "price": 10.99, "inventory": 10},
  {"id": 3, "title": "Charli XCX - Sucker CD", "price": 19.99, "inventory": 5}
]
import { mapGetters, mapActions } from 'vuex'
export default {
  computed:{ 
    products:function(){ return allproducts}
  },
  methods:{ 
    doneEdit:function(refid){
    let dom=this.$refs[refid][0];
    dom.parentNode.nextElementSibling 
    && dom.parentNode.nextElementSibling.childNodes[3].focus()
    },
    ...mapActions([
    'addProductToCart',
  ])},
  beforeCreate(){
    console.log('生命周期');
  },
  created () {
    this.$store.dispatch('getAllProducts')
  }
}</script>

根据@luozz的提示精简了下代码

<li class="border-none" v-for="(item,index) in prcHdAreaList" :key="item.pmcKeyVal">
    <input
         v-validate="'required'"
         @keyup.enter="nextInput('hdArea',index)"
         :class="{'input': true, 'is-danger': errors.has('item.phaRate'), 'hdArea': true }" 
         name="item.phaRate" class="cus_input" 
         v-model.trim="item.phaRate" type="number"/>
</li>
nextInput: function(name,index){
    var inputs = document.getElementsByClassName(name);
    inputs[index + 1].focus();
    inputs[index + 1].select()
},

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
  <div class="wrap">
    <input type="text" @keydown.enter="fun()">
    <input type="text" @keydown.enter="fun()">
    <input type="text" @keydown.enter="fun()">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: ".wrap",
      methods: {
        fun() {
          const DOM = event.target
          const nextDOM = DOM.nextElementSibling
          nextDOM.focus()
        }
      }        
    })
  </script>
  </div>
</body></html>