el的form表单里面有很多输入框，实现点击回车焦点跳到下一个输入框里

在使用el的form表单时，有时候会有很多的输入框，点击回车焦点跳到下一个输入框,我们需要自定义属性v-enterToNext（随便取）

 <el-form :model="form" :inline="true" v-enterToNext>
 </el-form>

enterToNext便是自定义属性，在对应的form表单使用即可

Vue.directive("enterToNext", {
  inserted: function (el) {
    console.log("enterToNext...");
    //let frm = el.querySelector('.el-form');
    let inputs = el.querySelectorAll("input");
    console.log(inputs);
    //绑定回写事件
    for (var i = 0; i < inputs.length; i++) {
      inputs[i].setAttribute("keyFocusIndex", i);
      inputs[i].addEventListener("keyup", (ev) => {
        if (ev.keyCode === 13) {
          let targetTo = ev.srcElement.getAttribute("keyFocusTo");
          if (targetTo) {
            this.$refs[targetTo].$el.focus();
          } else {
            var attrIndex = ev.srcElement.getAttribute("keyFocusIndex");
            var ctlI = parseInt(attrIndex);
            if (ctlI < inputs.length - 1) inputs[ctlI + 1].focus();
          }
        }
      });
    }
  },
});

最后

以上就是欢喜西装为你收集整理的el的form表单里面有很多输入框，实现点击回车焦点跳到下一个输入框里的全部内容，希望文章能够帮你解决el的form表单里面有很多输入框，实现点击回车焦点跳到下一个输入框里所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。