过滤产生角色的keyup事件

Question

我只需要跟踪生成角色的键的keyup事件。我需要keyup（跟踪所有键）keypress（仅跟踪产生字符的那些键）的原因是因为我的逻辑必须在字符出现后运行在DOM中。

我的逻辑样式内容已添加到contenteditable（TinyMCE），但我无法在keypress上执行此操作，因为内容尚未实际添加。

keyup的MDN文档提到char属性，听起来像我想要的那样，但至少在Chrome中，它总是undefined。

我需要支持IE10 +，现代Chrome / Firefox，如果重要的话。

Answer 1

您可以使用正则表达式检查按下的键是否为字符。

function(e) {
  if (e.key.match(/^[a-zA-Z]$/g)) {
     // Do something with character
  }
}

Answer 2

为他们生成您可以使用的字符的密钥代码创建白名单，然后将密钥事件中的当前密钥代码与您的白名单进行比较。

或者，您也可以跟踪元素的innerText，然后比较keyup上的差异以查看输入的内容。

总而言之，keyup仍将不正确地捕捉粘贴内容的场景，并且鉴于当前流行的emojies，如果没有白名单，任何对密钥代码或char的检查将不可避免地变得单调乏味。

虽然这可能需要花费很少的时间来构成，但未来的时间和麻烦将是值得的。