技术先进的网站建设公司电商培训

一个父组件里面是有各个子组件的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();
},