Javascript 如果在输入字段外按下某个键，则不会触发keyup事件ls

我正在尝试实现与“继续”按钮相同的功能，请参见示例代码，但用于键控输入

我想发生什么

如果在输入字段外单击，但仍在lightslategray容器中，并且按了enter键，则启动事件侦听器

发生了什么事

如果在输入字段中尝试按enter键，事件侦听器将按预期启动

如果我尝试在未聚焦的输入字段之外按enter键，但仍在包含事件侦听器的容器中，则不会发生任何事情

我该如何解决这个问题

示例代码

让容器=document.querySelector.container； 让continueBtn=document.querySelector.continueBtn； 让输入=document.querySelector.input-field； //单击事件侦听器 continueBtn.addEventListener'click'，functionevent{ 如果输入.value！= console.log单击“继续”后执行操作； }; //键控事件侦听器 container.addEventListener'keyup'，functionevent{ 如果event.key==输入&&input.value！= console.log在按enter键后执行操作； }; .集装箱{ 文本对齐：居中； 背景：浅灰色； 高度：100px； 宽度：300px； 位置：相对位置； } 持续 键盘事件（如keyup）仅在可聚焦元素上触发，但正文、文档和窗口除外

因此，对于不可聚焦的灰色div元素，您需要通过以下方式使其可聚焦：

让容器=document.querySelector.container； 让continueBtn=document.querySelector.continueBtn； 让输入=document.querySelector.input-field； //单击事件侦听器 continueBtn.addEventListener'click'，functionevent{ 如果输入.value！= console.log单击“继续”后执行操作； }; //键控事件侦听器 container.addEventListener'keyup'，functionevent{ 如果event.key==输入&&input.value！={ console.log在按enter键后执行操作； } }; .集装箱{ 文本对齐：居中； 背景：浅灰色； 高度：100px； 宽度：300px； 位置：相对位置； } 持续

---

你的键盘永远不会超过某个区域或容器。基本上，您只能在窗口对象或可写字段（如输入或文本）中捕获键盘事件，但它们也属于窗口。当窗口上发生键盘事件时，您仍然可以检查鼠标是否指向特定区域，如container@caramba在没有显示输入字段的div的站点上信息按enter键，将显示另一个div，其中包含更多信息等等。这些事件侦听器是否也附加了窗口对象？也许我的措辞不够准确，但我没有试图使其可聚焦。@Spanish初学者如回答的第一句所述，使其可聚焦是唯一的方法。