检测可打印键答案

【问题标题】：Detect printable keys检测可打印键
【发布时间】：2022-01-27 00:07:10
【问题描述】：

我需要检测刚刚按下的键是可打印键，如字符，可能重音，数字，空格，标点符号等，还是不可打印键，如 ENTER，TAB或删除。

除了列出所有不可打印的键并希望不要忘记一些之外，是否有可靠的方法在 Javascript 中执行此操作？

【问题讨论】：

【解决方案1】：

幸运的是，这项任务在现代浏览器中要容易得多。您现在可以使用KeyboardEvent.key 通过长度来检测可打印密钥。

test.onkeydown = e => {
  let isPrintableKey = e.key.length === 1;
  alert(`Key '${e.key}' is printable: ${isPrintableKey}`);
}

&lt;input id="test"&gt;

除此之外，您还可以从列表中检测任何其他键，例如Enter、Delete、Backspace、Tab 等。

这种方法更可靠，因为与event.which 不同，event.key 已经标准化了。

【讨论】：

需要注意的是，这会在旧版浏览器中不正常地崩溃，因为e.key 是未定义的。检查e.key && e.key.length === 1 更安全。即使是 2018 年，全球对 key 的支持也只有 ~80%：caniuse.com/#feat=keyboardevent-key
不幸的是，它不是那么可靠。例如，在 IE11 中，如果您按下小键盘上的数学运算符键或逗号，您将获得“除”、“乘”、“减”、“加”、“小数”。
如果您将其与 e.preventDefault() 一起使用，请小心，因为您还会阻止键盘快捷键（例如 CMD+R）。
实际上是否定义了可打印键的事件将始终具有“键长度”为 1？我可以想象某些语言中的某些键会产生多个字符。

【解决方案2】：

我昨天回复了similar question。请注意，您必须使用keypress 事件来处理与字符相关的任何事情； keydown 不行。

顺便说一句，我认为 Enter 是可打印的，并且这个函数认为它是可打印的。如果您不同意，可以修改它以过滤掉按键，并将事件的 which 或 keyCode 属性设置为 13。

function isCharacterKeyPress(evt) {
    if (typeof evt.which == "undefined") {
        // This is IE, which only fires keypress events for printable keys
        return true;
    } else if (typeof evt.which == "number" && evt.which > 0) {
        // In other browsers except old versions of WebKit, evt.which is
        // only greater than zero if the keypress is a printable key.
        // We need to filter out backspace and ctrl/alt/meta key combinations
        return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8;
    }
    return false;
}

var input = document.getElementById("your_input_id");
input.onkeypress = function(evt) {
    evt = evt || window.event;

    if (isCharacterKeyPress(evt)) {
        // Do your stuff here
        alert("Character!");
    }
});

【讨论】：

MDN 建议我们不应该使用 window.event 属性，因为它是非标准的并且可能存在不兼容性，link。对此有何看法？
@Segmentation：我完全同意。我只会将它用于与 IE window.event 无论如何都只会在旧 IE 中使用，因为事件对象将被传递到所有现代浏览器中的事件处理程序中。
keypress 事件已弃用：developer.mozilla.org/en-US/docs/Web/API/Document/…
which 事件也已弃用：developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

【解决方案3】：

如果您需要在用户更改输入时识别可打印键仅用于更改检测，您可以使用oninput 事件。

【讨论】：

【解决方案4】：

let isPrintableKey = event.key.length === 1 || event.key === 'Unidentified';

如果您不包括：|| event.key === 'Unidentified'，您的代码将无法在移动浏览器上运行。

【讨论】：