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

Question

我正在开发一个类似 WYSIWYG 的方程式编辑器（结合纯文本）。由于使用现有框架（contentEditable 或 document.designMode）无法实现我想要的功能（用于方程式），因此我现在从头开始构建一个编辑器。（到目前为止一切顺利，我已经成功实现了普通编辑器的大部分功能）

我一直在使用 keydown 事件来检测用户在 "edit-mode" 中的输入（即，当用户单击编辑器区域时，也会显示光标），但问题在于也就是说，当单击 "alt" 或 "strg" 或其他不是实际字符的键时，它们也会显示在我的编辑器中。

现在，我尝试过使用 if 语句忽略这些键，但我发现有 2 个问题： 1.它可能会影响性能，当太多的键必须被忽略时 2. 我永远不能确定，如果不存在一些奇异的密钥，也许在 Mac 左右，我没有忽略

我也尝试过使用按键事件，大部分情况下工作正常，但仍然显示 "Enter" 和 "Delete"，所以谁知道它可能还会显示其他键。此外，它被标记为 "deprecated".

有没有更好的方法，或者我只需要列出一大堆要忽略的键？

Answer 1

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

如果您需要的不仅仅是字母，另一个解决方案是检查事件的 key 及其长度。对于实际字符，key 只包含该字符（因此长度为 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>

Answer 2

你也可以看看这个

document.addEventListener("keydown", (event) => {
      console.log(event);
      if (event.code === "Escape") {
        console.log("abc");
      }
    });

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

How to detect actual characters only with JS key-events (for text-editor)

javascript

keypress

wysiwyg

text-editor