Firefox中focus()函数失效求助：搜索模态框无法获取焦点

我之前也碰到过一模一样的坑！Chrome和Safari都能正常让搜索框获取焦点，偏偏Firefox里就是不行，既然已经排除了用户特定设置的问题，那核心原因大概率是Firefox的DOM渲染时序和其他浏览器存在差异——当你给searchOverlay添加show类后，浏览器需要一点时间完成元素的显示渲染（比如从display: none切换到可见状态），如果立刻调用focus()，这时候元素可能还没处于可交互的可见状态，焦点设置自然就失效了。

解决这个问题最靠谱的办法就是用setTimeout()把焦点设置的操作推迟到下一轮事件循环，哪怕只延迟0毫秒也能解决问题，因为这样能确保DOM已经完成了重绘/回流。修改后的代码如下：

function searchOpen(event) {
  event.preventDefault();
  searchOverlay.classList.add("show");
  // 延迟到下一轮事件循环执行focus，确保Firefox完成元素渲染
  setTimeout(() => {
    searchOverlayInput.focus();
  }, 0);
}

为什么0毫秒就有用？ #

setTimeout(callback, 0)并不会真的立刻执行回调，而是把它放到浏览器事件队列的末尾，等当前所有同步任务（包括添加类后的DOM更新操作）都完成后再执行。这时候searchOverlay已经完全显示出来了，调用focus()自然就能正常生效。

如果极端场景下0毫秒还是有问题，可以把延迟时间调到10-20毫秒，基本就能覆盖所有情况了。

内容的提问来源于stack exchange，提问作者user5481714