javascript - 如果在输入字段之外按下按键，则不会触发 keyup 事件

Question

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

我想要发生什么

如果您在输入字段外部单击，但仍在 lightslategray 容器 中，并且按下了 enter 键，则触发事件监听器。

发生了什么

如果我尝试在输入字段中按enter，事件监听器将按预期触发。

如果我尝试在未聚焦的输入字段之外按 enter，但仍在具有事件监听器的容器中，则不会发生任何情况。

如何解决这个问题？

示例代码

let container = document.querySelector(".container");
let continueBtn = document.querySelector(".continueBtn");
let input = document.querySelector(".input-field");


// Click event listener
continueBtn.addEventListener('click', function(event) {
  if (input.value != "")
    console.log("Do something after clicking continue");
});

// Keyup event listener
container.addEventListener('keyup', function(event) {

  if (event.key === "Enter" && input.value != "")
    console.log("Do something after pressing enter");
});

.container {
  text-align: center;
  background: lightslategray;
  height: 100px;
  width: 300px;
  position: relative;
}

<div class="container">
  <input class="input-field" type="text" value="sample text">
  <button class="continueBtn">Continue</button>
</div>

Answer 1

诸如 keyup 之类的键盘事件仅在可聚焦元素上触发(body、document 和 window 除外)。

因此，为了使其在灰色 div 元素(不可聚焦)上工作，您需要通过给它一个 tabindex attribute 来使其可聚焦。 :

let container = document.querySelector(".container");
let continueBtn = document.querySelector(".continueBtn");
let input = document.querySelector(".input-field");


// Click event listener
continueBtn.addEventListener('click', function(event) {
  if (input.value != "")
    console.log("Do something after clicking continue");
});

// Keyup event listener
container.addEventListener('keyup', function(event) {
  if (event.key === "Enter" && input.value != ""){
    console.log("Do something after pressing enter");
  }
});

.container {
  text-align: center;
  background: lightslategray;
  height: 100px;
  width: 300px;
  position: relative;
}

<div class="container" tabindex="0">
  <input class="input-field" type="text" value="sample text">
  <button class="continueBtn">Continue</button>
</div>

但是，还有另一个问题。当您在关注 input 或 button 时按 Enter 时，keyup 事件也会被触发。这是因为事件在 DOM 树中向上冒泡，这意味着当一个元素触发事件时，它的所有父/祖 parent 也会触发该事件。

为了防止这种情况发生，您可以添加一个检查，以便仅在 event.target 是您想要的元素时运行代码:

let container = document.querySelector(".container");
let continueBtn = document.querySelector(".continueBtn");
let input = document.querySelector(".input-field");


// Click event listener
continueBtn.addEventListener('click', function(event) {
  if (input.value != "")
    console.log("Do something after clicking continue");
});

// Keyup event listener
container.addEventListener('keyup', function(event) {
  if (event.target === container){
    if (event.key === "Enter" && input.value != ""){
      console.log("Do something after pressing enter");
    }
  }
});

.container {
  text-align: center;
  background: lightslategray;
  height: 100px;
  width: 300px;
  position: relative;
}

<div class="container" tabindex="0">
  <input class="input-field" type="text" value="sample text">
  <button class="continueBtn">Continue</button>
</div>