如何仅使用 JS 键事件检测实际字符（用于文本编辑器）

Question

我正在为方程（结合纯文本）开发一个类似 WYSIWYG 的编辑器。由于使用现有框架（contentEditable 或 document.designMode）无法实现我想要的功能（用于方程式），因此我现在正在从头开始构建一个编辑器。（到目前为止效果很好，我已经成功实现了普通编辑器的大部分功能）我一直在使用 keydown 事件来检测处于“编辑模式”时的用户输入（即，当用户单击编辑器区域时，也显示光标），但问题在于，单击时“alt”或“strg”或其他不是实际字符的键，它们也会显示在我的编辑器中。现在，我尝试使用 if 语句忽略这些键，但是我看到了两个问题： 1. 它可能会影响性能，当必须忽略太多键时 2. 我永远无法确定，如果不存在一些异国情调的密钥，也许在 Mac 左右，我没有忽略我也尝试使用 keypress 事件代替，它工作得很好，但仍然显示“Enter”和“Delete”，所以谁知道它也可能显示哪些其他键。此外，它被标记为“已弃用”。有没有更好的方法来做到这一点，或者我只需要列出一大串要忽略的键？

Answer 1

你也可以检查这个

document.addEventListener("keydown", (event) => {

      console.log(event);

      if (event.code === "Escape") {

        console.log("abc");

      }

    });

Answer 2

一个简单（但有限）的方法是检查 keydown 事件keyCode是否在 65（键 'a' 的代码）和 90（'z' 的代码）之间。

如果您需要的不仅仅是字母，另一种解决方案是检查事件key及其长度。对于实际字符， thekey只保存该字符（因此长度为 1）。对于 Ctrl、Shift 等，key将保存键的全名，例如“Control”、“Shift”等。

因此，如果键是实际字符，则该key属性的长度为 1。

document.onkeydown = function(e) {

  var keycode = e.keyCode;

  if(e.key.length == 1) {

    document.querySelector("#editor").innerHTML += e.key;

  }

}

<p id="editor"></p>