Question

在事件监听器中我使用的是e.key，但似乎很多旧版浏览器都不支持它。

从https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode和https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which我可以看到e.keyCode和e.which已被弃用，而不是e.key，所以我想使用e.key但是，当某些浏览器不支持它时我该怎么办？

我应该使用

const key = e.key || String.fromCharCode(e.keyCode);

如果密钥例如是逗号，它们似乎不会给我相同的结果。

Answer 1

您可以使用所有浏览器支持的首选e.key来使用支持的所有内容

if (e.key) {
     var key = e.key;
} else {
    var code = e.which || e.keyCode;
    var key  = String.fromCharCode(code);
}

他们应该返回相同的字符

＆＃13;

document.getElementById('test').addEventListener('keypress', function(e) {
    var code = e.which || e.keyCode;
    var key  = String.fromCharCode(code);
    
    console.log(key, e.key)
});

＆＃13;

<p>Type in the input !</p>
<input id="test">

＆＃13;

请注意，keyup和keydown事件会为某些键返回不同的密钥代码。

Answer 2

我尝试在我的应用程序中实现e.key，因为我在MDN上看到e.keyCode和e。都被弃用enter code here。但是，我在任何地方看到的仍然是e.keyCode ||的实现。 e.which，以及确切的代码仍然可以在任何地方使用，对我来说也很好。 MDN没有为e.key提供任何解决方案或可行的实现，而且我也看不到任何键代码。我说文档是错误的。并且如此处所述，e.key与e.keyCode或e.which不同。我想知道实际上应该替换e.keyCode或e。哪个。例如，我在按键事件中使用它。 e.key破坏了我的代码。这是代码：

[...inputs].forEach(input => input.addEventListener('keydown', (e) => {
    console.log(Array.isArray([...inputs]))
    console.log([...inputs])
    const chord = e.keyCode || e.which
    if (chord === 8) {
        e.preventDefault()
        e.currentTarget.value = ''
        heading1.innerHTML = `User Registration Form`;
        heading1.style.color = `#228b22`;
    }
}))

这是实时应用程序的链接：

User Registration Form Using JS Constraint Validation API

大多数浏览器都不支持e.key

2 个答案: