一個父組件里面是有各個子組件的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) {
//頁面所有的formconst 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();
},