Question

我阅读了vue的文档，但无法弄清楚将键盘事件监听器添加到我的应用程序的正确方法是什么。它仅显示了如何为输入元素添加一个。我有类似的东西：

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

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

我应该document.addEventListener()还是window.addEventListener()？我不需要整个应用程序的事件监听器，仅需要div即可。

Answer 1

请参阅此JS Fiddle。

键盘事件仅在您专注于该元素时才起作用。因此，专注于整个<div>并进行键盘事件会有所帮助。这也消除了这两个左右按钮的需要。 <button>和<a>之类的元素可以集中注意力，而<div>则不能。因此，我们需要手动为其添加标签索引。

详细了解标签索引from here。

Answer 2

它确实按预期工作。您只需要确保按钮对准焦点即可。

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。确保使用Tab / Shift + Tab键在按钮之间切换焦点。

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

2 个答案: