javascript - focus() 函数在 Firefox 中不起作用

Question

我有一些 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?

两个答案都表明了两件事

1. 用户特定设置
2. 执行setTimeout()

我的 iMac 上没有可以防止这种情况发生的用户特定设置。至于建议#2，我试过了:

function searchOpen(event) {
  event.preventDefault();
  searchOverlay.classList.add("show");
  setTimeout(function(){searchOverlayInput.focus();}, 1);
}

还是不行。

有什么想法吗？

Answer 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>