检测可打印按键

Question

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

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

Answer 1

幸运的是，这个任务在现代浏览器中要容易得多。您现在可以使用

KeyboardEvent.key

通过其长度来检测可打印密钥。

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

<input id="test">

除此之外，您还可以检测列表中的任何其他键，例如

Enter

、

Delete

、

Backspace

、

Tab

等。

这种方法更可靠，因为与

event.which

不同，

event.key

已经标准化。

Answer 2

我昨天回答了类似问题。请注意，对于任何与角色相关的内容，您都必须使用

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!");
    }
});

Answer 3

如果您需要识别可打印密钥只是为了在用户更改输入时进行更改检测，您可以使用

oninput

事件。

Answer 4

let isPrintableKey = event.key.length === 1 || event.key === 'Unidentified'; 如果您不包含：

|| event.key === 'Unidentified'

，您的代码将无法在移动浏览器上运行。

Answer 5

我更喜欢这个解决方案：

https://github.com/ndrsn/is-printable-key-event .

只需列出每个关键代码，简单又健壮^_^。