我正在尝试实现与继续按钮相同的功能(请参阅示例代码),但用于键控输入
我想要发生什么
如果您在输入字段外部单击,但仍在 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>
最佳答案
诸如 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>
关于javascript - 如果在输入字段之外按下按键,则不会触发 keyup 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59638369/