替换已弃用的 `keypress` DOM 事件

Question

根据MDN article keypress 事件已被弃用：

但我在其他地方找不到任何关于我们是否应该在新项目中使用此事件的信息。如果我们不应该，替换是什么？

有人可以提供见解吗？

Answer 1

由于该事件已被弃用，您应该避免在新代码中使用它，并计划从旧代码中删除它。 W3C specification 谈到了已弃用的功能：

标记为弃用的功能包含在规范中，作为对旧实现或规范的参考，但它们是可选的并且不鼓励使用。本规范中必须弃用已存在或正在进行替换的功能。由于与现有内容的向后兼容性，尚未包含对该功能的支持的实现可能会实现已弃用的功能，但创建内容的内容作者不应使用已弃用的功能，除非没有其他方法可以解决用例强>。引用本规范的其他规范不应使用已弃用的功能，而应指向不推荐使用该功能的替代品。本规范中标记为已弃用的功能预计将从未来的规范中删除。

keypress event 的规范说：

警告 为了参考和完整性，本规范中定义了按键事件类型，但本规范不推荐使用此事件类型。在编辑上下文中，作者可以改为订阅beforeinput 事件。

您还可以使用keydown 和/或keyup 事件。见What's the difference between keyup, keydown, keypress and input events?

但是，由于 beforeinput 还没有太多支持，如果这些其他事件都不适合您的用例，您现在必须继续使用 keypress（这是“除非没有其他方法解决规范中的用例”异常）。

Answer 2

您可以使用keydown 事件。与 keypress 事件不同，keydown 事件为所有键触发，无论它们是否产生字符值。

const log = document.getElementById('log');

document.addEventListener('keydown', logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

<p>Focus the IFrame first (e.g. by clicking in it), then try pressing some keys.</p>
<p id="log"></p>

Answer 3

除非（为你感到羞耻）你或你使用的东西一直在破坏事件冒泡的每一个机会，否则不是很难解决。

像这样简单但功能强大的实用程序正是您应该只对 HTML 的孤立节点叶子执行此操作的原因。

在您确实必须防止 keydown 冒泡的情况下，您可以简单地将以下内容包装在一个函数中，该函数需要一个参数来代替 document.body，如果您仍然想要“keypress2”，只需在冒泡停止的地方应用该 HMTL 可用的事件。

const keyBlacklist = [
    'Shift',
    'Alt',
    'Control',
    'Meta'
];

document.body.addEventListener('keydown',(e)=>{
    if(keyBlacklist.indexOf(e.key) === -1){
        const newKeyPress = new CustomEvent('keypress2',{detail:e});
        e.target.dispatchEvent(newKeyPress);
    }
});

document.body.addEventListener('keypress2',e=>{console.log(e.detail);});