我有一些 JS 可以显示搜索模式并提供搜索焦点。它看起来像这样:
function searchOpen(event) {
event.preventDefault();
searchOverlay.classList.add("show");
searchOverlayInput.focus();
}
似乎在 chrome 和 safari 中工作正常,但在 FireFox 中搜索不集中。
我发现:
Javascript focus not working in firefox
javascript focus() not working on Firefox and IE?
两个答案都表明了两件事
- 用户特定设置
- 执行
setTimeout()
我的 iMac 上没有可以防止这种情况发生的用户特定设置。至于建议#2,我试过了:
function searchOpen(event) {
event.preventDefault();
searchOverlay.classList.add("show");
setTimeout(function(){searchOverlayInput.focus();}, 1);
}
还是不行。
有什么想法吗?
最佳答案
我运行类似这样的代码来查看某个元素是否可用于聚焦。基本上检查它是否可见,如果不可见,则再次检查,直到它能够被聚焦。
function focusWhenVisible (elem) {
var cnt = 0;
var check = function () {
if (elem.offsetHeight) { //reports zero when hidden
elem.focus()
} else if (cnt++ < 1000) { // only check for a certain amount of iterations
setTimeout(check, 1);
}
}
check()
}
document.querySelector("#b1").addEventListener("click", function () {
var inp = document.querySelector("#in1");
focusWhenVisible(inp)
inp.removeAttribute("hidden");
});
document.querySelector("#b2").addEventListener("click", function () {
var inp = document.querySelector("#in2");
focusWhenVisible(inp)
window.setTimeout(()=>{inp.removeAttribute("hidden");},500)
});
<input type="input" id="in1" hidden />
<button type="button" id="b1">Click</button>
<input type="input" id="in2" hidden />
<button type="button" id="b2">Click w/ Delay</button>
关于javascript - focus() 函数在 Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49823621/