为什么 JS .focus() 只能在 50ms 或更长的 setTimeout 内工作

Question

问题

我正在为客户创建一个工作页面，其中包含一个滑出式搜索栏。当我单击一个打开搜索输入字段的按钮（它开始隐藏）时，我希望焦点（光标）移动到搜索栏（输入）。

出于某种奇怪的原因，我似乎能够获得焦点来切换输入字段的 ONLY 方法是，如果我将它放在 setTimeout 中，最短时间约为 50 毫秒（我试过 0 ，但不起作用）。

奇怪的警告 - 当我关闭搜索栏（单击隐藏搜索的打开/关闭按钮）时，我可以暂时输入字段获得焦点/光标，但当它打开时却没有，这正是我想要的。除非它在 ​​setTimeout....

我尝试过的

将焦点设置为其他内容，然后对其进行模糊处理，然后将焦点设置为我的输入字段。 [x]

• 用 0 毫秒 [x] 将 .focus() 包装在 setTimeout 中

• 将焦点设置到我创建的另一个“测试”输入字段。 [作品]

• 将tabindex添加到-1 [x]的输入

const icon = document.getElementById("search-icon");
const form = document.getElementById("search-form");
const input = document.getElementById("search-input");

icon.parentElement.addEventListener("click", e => {
  form.classList.toggle("visible");
  icon.classList.toggle("fa-search");
  icon.classList.toggle("fa-times");  

  setTimeout(() => input.focus(), 50);

});

<div class="header__search">
    <i id="search-icon" class="fas fa-search">click me</i>
    <form
      id="search-form"
      class="header__search-area"
      onclick="event.stopPropagation()"
    >
      <input
        id="search-input"
        tabindex="-1"
        type="text"
        placeholder="Enter Search Term..."
      />
      <button type="submit">search</button>
    </form>
</div>

为了更快地理解，您单击图标 (id=search-icon)，它会在其旁边显示一个绝对位置的表单，其中包含我想要关注的“输入”。

如果有人能解释这一点，那就太棒了。 Google 提供了否定的答案。

Answer 1

因为您刚刚单击了某个东西并用鼠标设置了焦点，然后您就立即更改了它。第一次聚焦（点击时）需要先完成。

如果您在mouseup 事件上执行此操作，则您单击只需立即更改焦点，而不会延迟，因为那是释放鼠标按钮的时间。见下文。

---

编辑

再想一想……我真的不确定了。复制了您的代码并消除了延迟，但效果很好。

const icon = document.getElementById("search-icon");
const form = document.getElementById("search-form");
const input = document.getElementById("search-input");

icon.parentElement.addEventListener("click", e => {
  form.classList.toggle("visible");
  icon.classList.toggle("fa-search");
  icon.classList.toggle("fa-times");  
  
  input.focus();

});

<div class="header__search">
    <i id="search-icon" class="fas fa-search">click me</i>
    <form
      id="search-form"
      class="header__search-area"
      onclick="event.stopPropagation()"
    >
      <input
        id="search-input"
        tabindex="-1"
        type="text"
        placeholder="Enter Search Term..."
      />
      <button type="submit">search</button>
    </form>
</div>