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; input = nextEl.querySelector("input"); } if (input.className.includes("el-input__inner")) return input; } if (e.keyCode === 13) { const container = findFormItem(document.activeElement); findInput(container) && findInput(container).focus(); } } }
然后在 mounted 中添加回车监听和在 destroy 中移除回车键听。
mounted() { this.addEnterListener(); }, destroy() { this.removeEnterListener(); },
需要注意的是,项目是多标签页的形式,表单组件可能会被渲染多次,所以通过在 window 对象上添加一个 __completeEnterBind__ 字段来确保回车换行事件正确绑定。
总结
以上所述是小编给大家介绍的Vue中实现回车键切换焦点的方法,希望对大家有所帮助,也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章: