如何判断KeyboardEvent.key是可打印字符还是控制字符？

Question

我正在编写一个按键事件，该事件对某些控制字符执行特殊功能，但将任何可打印字符插入字符串中。

this.handle_keypress = function(event) {
    let callback = this.control_function[event.key];
    if(callback) {
        callback.bind(this)(event);
    }
    else {
        this.myText += event.key;
    }
}

this.element.addEventListener('keypress', this.handle_keypress.bind(this));

但这会将未映射的控制字符的文本插入到我的字符串中（例如“LeftArrow”或“Backspace”）。如何判断哪些字符是可打印字符，哪些是控制字符？

过去，我会使用 event.which 或 event.charCode，但这些现在已标记为已弃用。

据我所知，我无法使用输入事件，因为我没有在文本区域或输入字段中输入内容。

我在 Firefox 中运行这个。

Answer 1

查看 MDN 页面上 KeyboardEvent 属性的文档： https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

对于 KeyboardEvent.keyCode，他们提到：

该属性已被弃用；如果可用的话，您应该使用 KeyboardEvent.key 代替。

对于 KeyboardEvent.charCode，他们提到：

警告：该属性已被弃用；如果可用的话，您应该使用 KeyboardEvent.key 代替。

所以基本上“charCode”和“keyCode”已被简单的“code”和“key”取代。

另外，要识别控制字符并避免打印它们，您可以尝试：

1. 创建一个被忽略字符的数组

   var unsupportedKeyCharacters = ["Shift", "Escape", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"];
   

2. 调用该函数检查输入的字符是否可打印

       var isSupportedKey = function (keyCharacter) {
       var isKeySupported = false;
       var unsupportedKeyCharacters = ["Shift", "Escape", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"];
       for (var i = 0; i < unsupportedKeyCharacters.length; i++) {
           if (unsupportedKeyCharacters[i] === keyCharacter) {
               isKeySupported = false;
               break;
           }
       }
       return isKeySupported;
   }
   

3. 调用该函数来验证输入