大多数浏览器不支持E.key

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

它们应该返回相同的字符

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

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

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

Answer 2

我尝试在我的应用程序中实现e.p key，因为我在MDN上读到e.p keycode和e.p keycode都是废弃的enter code here ted。然而，我在任何地方看到的仍然是e.keyCode || e.c ewhich的实现，而这些代码仍然在任何地方都能很好地工作。MDN没有为e.k key提供任何解决方案或可行的实现，我也没有在任何地方看到密钥代码。我说文档是错误的。正如这里所述，e.key与e.keyCode或e.which不同。我想知道实际上应该是什么取代e.c keycode或e.c which。例如，我在keydown事件中使用它。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`;
    }
}))

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

使用JS约束验证API的用户注册表单