javascript - 如何在Web应用程序和网站中添加快捷键？

Question

有人可以解释一下如何在我的 Web 应用程序中创建快捷键(例如 Alt+S = 共享)吗？

我正在使用 HTML + SCSS + JS + MongoDB + React

我知道这是一个 super 开放式问题，但如果有人可以解释我该怎么做，那么我会在我的网络应用程序中添加我想要的所有快捷方式组合

万分感谢:)

Answer 1

您应该阅读键盘事件 https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

来自文档:

document.addEventListener('keydown', (event) => {
  const keyName = event.key;

  if (keyName === 'Control') {
    // do not alert when only Control key is pressed.
    return;
  }

  if (event.ctrlKey) {
    // Even though event.key is not 'Control' (e.g., 'a' is pressed),
    // event.ctrlKey may be true if Ctrl key is pressed at the same time.
    alert(`Combination of ctrlKey + ${keyName}`);
  } else {
    alert(`Key pressed ${keyName}`);
  }
}, false);

document.addEventListener('keyup', (event) => {
  const keyName = event.key;

  // As the user releases the Ctrl key, the key is no longer active,
  // so event.ctrlKey is false.
  if (keyName === 'Control') {
    alert('Control key was released');
  }
}, false);