假设我有一个输入
<input type="text" id="inPut" autofocus>
和一个按钮
<button id="btn">Some text</button>
我想要 onblur,它会失去焦点(通常会这样),但是当我单击此按钮时,焦点不会发生任何变化,即它不会失去焦点
最佳答案
可以使用JS将输入集中在按钮点击上。
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>
关于javascript - 即使我单击输入之外的按钮,如何保持输入焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67244921/