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

最新推荐文章于 2024-08-13 10:33:00 发布

nanupup

最新推荐文章于 2024-08-13 10:33:00 发布

阅读量1.8k

点赞数 3

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/nanupup/article/details/127648475

版权

在使用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();
          }
        }
      });
    }
  },
});