在 vue 中添加键盘事件监听器

Question

我阅读了 vue 的文档，但不知道将键盘事件侦听器添加到我的应用程序的正确方法是什么。它只是展示了如何为输入元素添加一个。我有这样的东西：

<div>
<p>Some content</p>
<button>Go left</button>
<button>Go right</button>
</div>

我想添加一个键盘事件侦听器，以便当用户按 ← 时，它会向左移动，→向右移动。 它适用于按钮事件侦听器，但我不知道如何使其适用于键盘。

我应该做document.addEventListener()还是window.addEventListener()？我不需要整个应用程序的事件侦听器，只需要那个div.

Answer 1

它确实按预期工作。你只需要确保你的按钮是聚焦的。

new Vue({
el: "#app",
methods: {
	squack: function(text){
	alert(text)
}
},
directives: {
focus: {
inserted(el) {
el.focus()
}
}
}
})

<div id="app">
<div>
<p>Some content</p>
<button @keyup.left="squack('left button clicked')" v-focus>Go left</button>
<button @keyup.right="squack('right button clicked')">Go right</button>
</div>
</div>

例如，请参阅此 JSFiddle。确保使用选项卡/Shift+Tab在按钮之间切换焦点。

Answer 2

看到这个 JS 小提琴。

仅当您将焦点放在该元素上时，键盘事件才有效。因此，专注于整个<div>并举办键盘事件会有所帮助。这也消除了对这两个左右按钮的任何需求。像<button>和<a>这样的元素有能力集中注意力，<div>没有。所以我们手动需要为其添加选项卡索引。

从此处了解有关选项卡索引的更多信息。