为什么JS .focus（）仅在setTimeout 50ms或更长时间内工作

Question

问题

我正在为客户创建一个带有滑出搜索栏的页面。当我单击打开搜索输入字段的按钮时，我希望焦点（光标）移动到搜索栏（输入）。

出于某些奇怪的原因，唯一的方法似乎是让我切换输入字段的焦点，如果我将其放入setTimeout且最短时间约为50ms（我尝试了0 ，但无效）。

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

我尝试过的

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

• 将.focus()中的setTimeout包裹为0毫秒[x]

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

• 将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），它旁边会显示一个表格，该表格的位置绝对，并包含我要关注的“输入”。

如果有人可以解释这一点，那就太好了。谷歌没有提供答案。

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>