模拟Tab键

Question

任何人都知道如何模拟Tab键来移动输入？

<input type="text" @keyup.enter="myfunc">
<input type="text" @keyup.enter="myfunc">
<input type="text" @keyup.enter="myfunc">

new Vue({
  methods: {
    myfunc() {
      //?
    }
  }
});

非常感谢！

Answer 1

您可以在Vue指令的帮助下完成此操作：vue-focus，请参阅工作代码here。

您必须将所有输入放在ID为

的div中

<div id="demo">
  <input type="text" v-focus="focused['0']" v-on:keyup.enter="changeFocus(1, 0)">
  <input type="text" v-focus="focused['1']" v-on:keyup.enter="changeFocus(2, 1)">
  <input type="text" v-focus="focused['2']" v-on:keyup.enter="changeFocus(nil, 2)">
</div>

并使用此id来安装Vue组件：

var demo = new Vue({
    el: '#demo',
      mixins: [ VueFocus.mixin ],
    data:{
         focused: {
             "0": true,
             "1": false,
             "2": false
         }
    },
    methods:{   
      changeFocus(bringInFocus, removeFocus){
         if(bringInFocus) this.focused[bringInFocus] = true
         this.focused[removeFocus] = false
      }
    }
})

Answer 2

是的，使用vue-focus肯定是要走的路。它可以通过npm安装。文档是自解释的，请参阅：

https://www.npmjs.com/package/vue-focus

关于上面Saurabh给出的例子：

<div id="demo">
    <input type="text" v-focus="focused['0']" @keyup.enter="changeFocus('0','1')" />
    <input type="text" v-focus="focused['1']" @keyup.enter="changeFocus('1','2')" />
    <input type="text" v-focus="focused['2']" />
</div>

然后你可以得到以下内容（注意我使用的是指令而不是mixin，但你也可以使用）：

import { focus } from 'vue-focus';

var demo = new Vue({
    el: '#demo',
    directives: { focus: focus },
    data:{
         focused: {
             "0": true,
             "1": false,
             "2": false
         }
    },
    methods:{   
        changeFocus(current, new) {
            this.focused[current] = false;
            this.focused[new] = true;
        }
    }
})