Vue表單回車(chē)事件下一個(gè)input獲取焦點(diǎn)

動(dòng)態(tài)生成的一組input,觸發(fā)enter事件后怎么focus下一個(gè)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()
            }
          }
        })
     }
})

回答

編輯回答

陌南塵

經(jīng)過(guò)我?guī)讉€(gè)小時(shí)的嘗試，使用自定義指令實(shí)現(xiàn)了該需求，沒(méi)有使用任何原生的DOM操作和插件，直接使用了vue提供的方法實(shí)現(xiàn)的。

具體代碼(直接復(fù)制粘貼便可看到效果，重要地方都做了注釋)：

<!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>
  // 注冊(cè)一個(gè)全局自定義指令 `v-focus`
  Vue.directive('focus', {
    // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
    inserted: function (el,obj) {  //這是需要頁(yè)面剛加載就能進(jìn)行聚焦操作使用的鉤子函數(shù),可以省略的，視具體需求而定
      //console.log(obj);
      if(obj.value) { //對(duì)值進(jìn)行判斷
        // 聚焦元素
        el.focus()        
      }
    },
    // 當(dāng)指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用
    componentUpdated: function(el,obj) {  //這是每當(dāng)綁定的值發(fā)生改變時(shí)觸發(fā)的鉤子函數(shù)
      //console.log(obj);  //可以打印看一下
      if(obj.value) {
        el.focus()        
      }
    }
  })
  new Vue({
      el: "#app",
      data() {
        return {
          focusIndex: 0, //用來(lái)存放下一個(gè)應(yīng)該聚焦的index值
          inputs: [{
            val: 1
          },{
            val: 2
          },{
            val: 3
          },{
            val: 4
          }]
        }
      },
      methods: {
        nextFocus(index) {
          return this.focusIndex = index + 1;
        }
      }
  });
</script>
</body>
</html>

希望我的回答對(duì)你有所幫助！^_^^_^ 不足之處，歡迎批評(píng)指正！

2018年5月1日 22:20

編輯回答

司令

根據(jù)@luozz的提示精簡(jiǎn)了下代碼

<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()
},

2017年3月11日 14:11

編輯回答

氕氘氚

直接上代碼吧- 動(dòng)態(tài)數(shù)據(jù)，動(dòng)態(tài)獲取，動(dòng)態(tài)焦點(diǎn)--ohye
圖片描述

<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>

2017年7月2日 09:10

編輯回答

北城荒

<!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>

如上代碼所示，nextElementSibling獲取下一個(gè)兄弟節(jié)點(diǎn)，再focus()獲取焦點(diǎn)即可

2018年7月31日 03:30