vue 实现回车跳转到下一个输入框

Question

表单的el-form-item 是动态生成的

类似这样的表单

目前通过给输入框添加ref然后再通过blur和focus可以跳过普通的输入框，但是遇到下拉框或者选择器就跳不了

Answer 1

移动光标就可以了，tab监听你也应该把this.$refs.*.focus();加上吧，否则跳转的意义是什么？

Answer 2

监听到点击enter键，通过操作dom实现光标切换

Answer 3

这类需求最佳解决方案是利用自定义指令

// 自定义指令，实现按下enter后，光标自动跳转下一个输入框
Vue.directive('enterNextInput', {
  inserted: function (el) {
    el.addEventListener("keypress",function(e){
      e = e || window.event;
      let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
      if(charcode == 13){
        var dom = document.getElementsByTagName("input")
        for (var i = 0; i < dom.length; i++) {
          if (dom[i] == document.activeElement) {
            if (i==dom.length) {
              return
            }
            dom[i+1].focus()
            return
          } 
        }
      }
    });
  }
});

// 使用
<input v-enter-next-input />
<input v-enter-next-input />