一个父组件里面是有各个子组件的form表单组成的。

我想实现点击enter。焦点直接跳转到下一个表单元素。

父组件就是由各个子组件构成

子组件就像下图一样的都有个el-form的表单。

enterToTab.js

let enterToTab = {};
(function() {
  // 返回随机数
  enterToTab.addEnterListener = function() {
    if (window.__completeEnterBind__) return;
    window.addEventListener("keydown", enterCallback);
    window.__completeEnterBind__ = true;
  };
  enterToTab.removeEnterListener = function() {
    window.removeEventListener("keydown", enterCallback);
    window.__completeEnterBind__ = false;
  };

  function enterCallback(evt) {
//页面所有的form
    const allForms = Array.from(document.querySelectorAll("form"));

    let currentIndex;//当前操作的表单的索引
    function getNextElement(field) {
      var form = field.form;
      //如果form.elements不存在就去寻找下一个最近的form元素
      if (form?.elements) {
        // 找到当前元素所在的表单
        const currentForm = form.closest("form");
        currentIndex = allForms.indexOf(currentForm);
      }

      for (var e = 0; e < form?.elements.length; e++) {
        if (
          field.className.includes("el-radio") &&
          field.querySelector("input") == form.elements[e]
        ) {
          break;
        } else if (field == form.elements[e]) {
          break;
        }
      }
      if (form?.elements[e + 1] == undefined) {//当前表单的最后一个元素.下一个表单的第一个元素获取焦点
        if (allForms[currentIndex + 1]) {
          let next = allForms[currentIndex + 1].querySelector("input");
          if (next.type == "radio") {//单选框
           return next.parentElement.parentElement.focus();
          } else {
           return next.focus();
          }
        }
      } else {
        return form?.elements[e + 1];
      }
    }

    if (evt.keyCode === 13) {
      //document.all可以判断浏览器是否是IE，是页面内所有元素的一个集合
      var isie = document.all ? true : false;
      var key;
      var srcobj;
      // if the agent is an IE browser, it's easy to do this.
      if (isie) {
        key = event.keyCode;
        srcobj = event.srcElement; //event.srcElement，触发这个事件的源对象
      } else {
        key = evt.which;
        srcobj = evt.target; //target是Firefox下的属性
      }
      if (
        key == 13 &&
        srcobj.type != "button" &&
        srcobj.type != "submit" &&
        srcobj.type != "reset" &&
        srcobj.type != ""
      ) {
        if (isie) event.keyCode = 9;
        //设置按键为tab键
        else {
          var el = getNextElement(evt.target);

          if (
            el?.type != "hidden" &&
            !el?.disabled //nothing to do here.
          ) {

          }else{
            while (el?.type == "hidden" || el?.disabled) el = getNextElement(el);
          }

          if (!el) {
            return false;
          } else if (el.type == "radio"||el.type=="select") {
            el.parentElement.parentElement.focus();
          } else {
            el.focus();
          }
        }
      }
    }
  }
})();
export default enterToTab;

 在各个子组件里面添加

import enterToTab from "@/utils/enterToTab";

mounted() {
  enterToTab.addEnterListener();
},
beforeDestroy() {
  enterToTab.removeEnterListener();
},