javascript 替代过时的'keypress' DOM事件

xjreopfe  于 2023-02-02  发布在  Java
关注(0)|答案(3)|浏览(210)

根据MDN articlekeypress事件已弃用:

但是我在别处找不到任何关于我们是否应该在新项目中使用这个事件的信息。如果我们不应该,什么是替代品?
有谁能给予我个建议吗?

pvcm50d1

pvcm50d11#

由于该事件已被弃用,因此您应该避免在新代码中使用它,并计划将其从旧代码中删除。W3C规范对弃用的功能是这样说的:
标记为已弃用的功能包含在规范中,作为对旧实现或规范的参考,但这些功能是可选的,不建议使用。只有现有或正在进行替换的功能必须在本规范中弃用。尚未包含对该功能支持的实现可能会由于向后兼容现有内容而实现已弃用的功能。但是创建内容的内容作者不应该使用过时的特征,除非没有其他方法来解决用例。引用本规范的其他规范不应该使用过时的特征,但是应该指向那些特性被弃用的替代品。2在本规范中被标记为弃用的特性将被从未来的规范中删除。
keypress event的规格说明如下:

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

还可以使用keydown和/或keyup事件。请参见What's the difference between keyup, keydown, keypress and input events?
然而,由于beforeinput还没有太多的支持,如果这些其他事件都不适合您的用例,您现在必须继续使用keypress(这是规范中的“除非没有其他方法来解决用例”例外)。

rks48beu

rks48beu2#

const handleKeyDown = (e: any) => {
  if (e.code === "Enter") {
  triggerBusqueda(e.target.value);
  }
};

onKeyDown={handleKeyDown}

你可以使用这个代码,它工作得很好。

zlhcx6iw

zlhcx6iw3#

不是超级难的工作周围,除非(可耻的是你)你或你使用的东西一直在痛击事件冒泡不分青红皂白地在每一个机会。
像这样简单但功能强大的实用程序正是为什么你应该只对HTML的孤立节点叶做这样的操作。
在那些你必须防止按键冒泡的情况下,你可以简单地把下面的代码 Package 在一个函数中,这个函数用一个参数代替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);});

相关问题