Vue.js @keydown 获取被按下的键

Posted 2023-03-17

【中文标题】Vue.js @keydown 获取被按下的键

【英文标题】：Vue.js @keydown get key that was pressed

【发布时间】：2021-06-12 19:18:51

【问题描述】：

我想用 Vue.js 输出按下了哪个键。

此代码有效：

window.addEventListener('keydown', (event) =>  
   console.log(event.key);
);

类似的东西例如：

<div @keydown="getKey">
</div>

getKey: function(event) 
   console.log(event.key)

【问题讨论】：

这确实有效，但在输入框和文本区域中……它似乎在 div 中不起作用。为什么你不能使用第一个例子呢？

【参考方案1】：

要实现这一点，您需要将事件监听器分配给 vue 方法：

created() 
  window.addEventListener('keydown', this.handleKeyDown);
,
beforeDestroy() 
  window.removeEventListener('keydown', this.handleKeyDown);
,
methods: 
  handleKeyDown(event) 
    console.log(event);