假设我有一个输入
<input type="text" id="inPut" autofocus>
和一个按钮
<button id="btn">Some text</button>
我想要 onblur,它会失去焦点(通常会这样),但是当我单击此按钮时,焦点不会发生任何变化,即它不会失去焦点
const btn = document.querySelector("#btn");
const inp = document.querySelector("#inp");
btn.addEventListener("click", () => {
inp.focus();
});
<input id="inp" type="text">
<button id="btn">Click</button>
要实现这一目标,我们不能简单地做到:
btn.addEventListener("click", () => {
if (inp === document.activeElement) {
inp.focus();
}
});
因为条件
inp === document.activeElement
永远不会为真,因为单击按钮将使按钮成为活动元素。
我们可以使用
mouseover
事件并存储输入的
focus” 信息放在变量中,这不会遇到与以前相同的问题,因为 mouseover
会在按钮获得焦点之前触发。
然后在
click
监听器中,如果输入已经聚焦,我们将聚焦输入。
const btn = document.querySelector("#btn");
const inp = document.querySelector("#inp");
let isInputFocused = false;
btn.addEventListener("mouseover", () => {
if (inp === document.activeElement) {
isInputFocused = true;
} else {
isInputFocused = false;
}
});
btn.addEventListener("click", () => {
if (isInputFocused) {
inp.focus()
}
});
<input id="inp" type="text">
<button id="btn">Click</button>