我如何检查是否在 JavaScript 中按下了组合键 [关闭]

Question

我正在编写一个程序，我想在其中添加自定义热键并存储它们。该组合必须由用户输入。假设用户选择 CTRL + M。如何存储此组合并在 Vanilla JS 中按下此组合时发出警报消息。

Answer 1

您可以使用keydown 事件来检测键盘事件，也可以在事件处理程序中使用event.ctrlKey 检查 Ctrl 键。

更新我添加了单选按钮来展示如何使用 keydown 事件动态使用组合，您还可以将其存储在数据库中并在前端显示如下：

document.addEventListener('keydown', logKey);

function logKey(e) {
  let command = document.querySelector('input[name="command"]:checked').value;
  let keypressed = document.querySelector('input[name="keypressed"]:checked').value;
  if (e.keyCode == keypressed && e[command]) alert(` ${command} + ${String.fromCharCode(e.keyCode)} pressed`);
  e.preventDefault();
  return false;
}

<label><input type="radio" name="command" value="shiftKey" checked /> Shift<label><br />
<label><input type="radio" name="command" value="ctrlKey" /> Ctrl<label><br />

<label><input type="radio" name="command" value="altKey" /> Alt<label>

<hr />

<label><input type="radio" name="keypressed" value="77" checked /> M<label><br />
<label><input type="radio" name="keypressed" value="68" /> D<label><br />
<label><input type="radio" name="keypressed" value="83" /> S<label>


<p>Focus the IFrame first (e.g. by clicking in it), then try pressing selected keys.</p>
<p id="log"></p>