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>

标签： javascriptevents

Answer 1

键盘事件keyup只在可聚焦元素上触发（除了body,document和window）。

因此，要让它在灰色元素（不可聚焦）上工作，您需要通过给它一个属性div来使其可聚焦：tabindex

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>

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

防止这种情况发生，您可以添加一个检查以仅在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>