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?

两个答案都提出了两件事

用户特定设置
执行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>

focus（）函数在Firefox中不起作用

1 个答案: