几乎在所有浏览器中，都具有 Tab 键切换焦点的功能。但是任性的用户强烈要求一定要有 Enter 键切换焦点的功能。为了交付上线拿到钱，我们只好再一次毫无原则性的接受了客户的需求。在上一代人中，大多都有这种操作习惯。习惯把保存成为编辑，习惯用回车替换 Tab。这是受到微软 excel 荼毒的结果。起初我以为这个功能很简单，无非就是把 Enter 键的功能转接到 Tab 键上面，分分钟就可以解决掉的问题。可困难马上就出现了，我发现这条路是走不通的。我们经常可以主动触发某个事件，比如 el.click() 就可以调用点击事件，或者使用 dispatchEvent 。但是键盘和鼠标事件却不行。el.click()dispatchEvent我查阅了很多资料，也做了很多尝试。最后总结出来一个结论，在浏览器中，JavaScript 无法操作用户的键盘或者鼠标，这是出于安全策略的考虑。仔细想一下，如果可以用一段 JavaScript 脚本控制用户键盘和鼠标的话，那么用户只需要打开一个黑客网站，黑客就可以瞬间得到他想得到的一切。所以，如果要通过除 Tab 键以外的其他方式来触发焦点切换， focus 几乎是唯一的选择。focus在原生页面中实现回车键切换焦点项目是基于 vue 和 element-ui 做的，为了把实现思路先讲清楚，暂时把这些抛开，从原生的页面中寻找答案。以下是一个原生的 html 页面。





Demo














Demo








接下来要实现通过回车键切换焦点，我把思路梳理如下：

监听回车键按下事件。

获取当前聚焦元素。

获取下一个要被聚焦的元素。

切换焦点。
监听回车键按下事件。获取当前聚焦元素。获取下一个要被聚焦的元素。切换焦点。思路有了，实现起来也非常简单。1.监听回车键按下事件在文档中添加 script 标签，写入如下代码。
function enterCallback(e) {
if (e.keyCode === 13) {
// 按下回车后的逻辑
}
}
window.addEventListener("keydown", enterCallback);
function enterCallback(e) {
if (e.keyCode === 13) {
// 按下回车后的逻辑
}
}
window.addEventListener("keydown", enterCallback);要注意， enterCallback 单独拿出来，用于注销监听事件。enterCallback监听按键事件最常用的方法就是使用事件委托，将事件绑定到 window 对象上。相比较给每一个元素都绑定一个事件的方式，这样做的最大好处就是节省内存空间，性能更好。window判断按下哪个键的方式有很多，比如判断 e.key 、 e.code 或者 e.keyCode 等方式。但绝大多数的情况下都建议使用 e.keyCode 。下面是一张来自网络的 keyCode 表。e.keye.codee.keyCodee.keyCodekeyCode2.获取当前聚焦元素很容易就可以做到这一步。常见的有两种方式。第一种是 e.target ，第二种是 document.activeElement 。这种情况下，个人更推荐使用第二种。e.targetdocument.activeElement
function enterCallback(e) {
if (e.keyCode === 13) {
let activeEl = document.activeElement;
}
}
function enterCallback(e) {
if (e.keyCode === 13) {
let activeEl = document.activeElement;
}
}3.获取下一个要被聚焦的元素这一步也比较容易。使用 el.nextElementSibling API 即可获取。el.nextElementSibling
function enterCallback(e) {
if (e.keyCode === 13) {
let activeEl = document.activeElement;
let nextEl = activeEl.nextElementSibling;
}
}
function enterCallback(e) {
if (e.keyCode === 13) {
let activeEl = document.activeElement;
let nextEl = activeEl.nextElementSibling;
}
}4.切换焦点切换焦点调用 focus 即可实现。focus
function enterCallback(e) {
if (e.keyCode === 13) {
let activeEl = document.activeElement;
let nextEl = activeEl.nextElementSibling;
nextEl && nextEl.focus();
}
}
function enterCallback(e) {
if (e.keyCode === 13) {
let activeEl = document.activeElement;
let nextEl = activeEl.nextElementSibling;
nextEl && nextEl.focus();
}
}至此一个最简单的 Demo 已经实现了，接下来看看项目中实际的情况。在 element-ui 项目中实现回车键切换焦点在 element-ui 项目中实现回车键切换焦点因为是使用组件开发，加上样式等因素，dom 节点并不像上面写的原生 Demo 那么简单，实际情况是多层嵌套的。下面是实际生成的代码结构。
class="el-form-item el-form-item--small"
style="margin-bottom: 0vh; width: 25%; display: inline-block;"
>