vue试按钮失去焦点_Vue中实现回车键切换焦点的方法

几乎在所有浏览器中，都具有 Tab 键切换焦点的功能。

但是任性的用户强烈要求一定要有 Enter 键切换焦点的功能。

为了交付上线拿到钱，我们只好再一次毫无原则性的接受了客户的需求。

在上一代人中，大多都有这种操作习惯。习惯把保存成为编辑，习惯用回车替换 Tab。这是受到微软 excel 荼毒的结果。

起初我以为这个功能很简单，无非就是把 Enter 键的功能转接到 Tab 键上面，分分钟就可以解决掉的问题。

可困难马上就出现了，我发现这条路是走不通的。

我们经常可以主动触发某个事件，比如 el.click() 就可以调用点击事件，或者使用 dispatchEvent 。但是键盘和鼠标事件却不行。

我查阅了很多资料，也做了很多尝试。最后总结出来一个结论，在浏览器中，JavaScript 无法操作用户的键盘或者鼠标，这是出于安全策略的考虑。仔细想一下，如果可以用一段 JavaScript 脚本控制用户键盘和鼠标的话，那么用户只需要打开一个黑客网站，黑客就可以瞬间得到他想得到的一切。

所以，如果要通过除 Tab 键以外的其他方式来触发焦点切换， focus 几乎是唯一的选择。

在原生页面中实现回车键切换焦点

项目是基于 vue 和 element-ui 做的，为了把实现思路先讲清楚，暂时把这些抛开，从原生的页面中寻找答案。

以下是一个原生的 html 页面。

Demo

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

监听回车键按下事件。

获取当前聚焦元素。

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

切换焦点。

思路有了，实现起来也非常简单。

1.监听回车键按下事件

在文档中添加 script 标签，写入如下代码。

function enterCallback(e) {

if (e.keyCode === 13) {

// 按下回车后的逻辑

}

}

window.addEventListener("keydown", enterCallback);

要注意， enterCallback 单独拿出来，用于注销监听事件。

监听按键事件最常用的方法就是