nextElementSibling API 只能找到下一个兄弟元素，而在这里 input 明显找不到下一个兄弟元素。思路是，通过回溯的手段朝外层寻找，直到找到一个类名包含
el-form-item 和
el-form-item--small 的祖级元素，然后再从这个祖级元素的下一个兄弟元素中寻找类名包含
el-input__inner 的 input 元素。所以要再写两个函数，分别是寻找组件元素的
findFormItem 和寻找 input 元素的
findInput 。findFormItem：
function findFormItem(el) {
const parent = el.parentElement;
if (!parent) return document.body;
if (
parent.className.includes("el-form-item") &&
parent.className.includes("el-form-item--small")
) {
return parent;
}
return findFormItem(parent);
}findInput：
function findInput(container) {
let nextEl = container.nextElementSibling;
if (!nextEl) return;
let input = nextEl.querySelector("input");
while (input.id === "el-select") {
nextEl = nextEl.nextElementSibling;
if (!nextEl) return;
input = nextEl.querySelector("input");
}
if (input.className.includes("el-input__inner")) return input;
}有了这两个函数以后，实现回车切换焦点就非常简单了。只需要执行两行代码。
const container = findFormItem(document.activeElement);
findInput(container) && findInput(container).focus();完整的代码大概是这样的。
在
methods 中声明三个方法。
methods: {
addEnterListener() {
if (window.__completeEnterBind__) return;
window.addEventListener("keydown", this.enterCallback);
window.__completeEnterBind__ = true;
},
removeEnterListener() {
window.removeEventListener("keydown", this.enterCallback);
window.__completeEnterBind__ = false;
},
enterCallback(e) {
function findFormItem(el) {
const parent = el.parentElement;
if (!parent) return document.body;
if (
parent.className.includes("el-form-item") &&
parent.className.includes("el-form-item--small")
) {
return parent;
}
return findFormItem(parent);
}
function findInput(container) {
let nextEl = container.nextElementSibling;
if (!nextEl) return;
let input = nextEl.querySelector("input");
while (input.id === "el-select") {
nextEl = nextEl.nextElementSibling;
if (!nextEl) return;
