在 Web 应用程序和网站中添加快捷键应该怎么做？答案

【问题标题】：What should I do to add the shortcut keys in Web Application and Web Sites?在 Web 应用程序和网站中添加快捷键应该怎么做？
【发布时间】：2020-02-21 13:52:27
【问题描述】：

谁能解释我如何在我的 Web 应用程序中创建快捷键（例如 Alt+S = Share）？

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

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

万分感谢:)

【问题讨论】：

标签： javascript html reactjs mongodb sass

【解决方案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);

【讨论】：