时间戳

首页 > 解决方案 > 为什么 JS .focus() 只能在 50ms 或更长的 setTimeout 内工作

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

问题描述

问题

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

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

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

我试过的

将焦点设置为其他内容，然后将其模糊，然后将焦点设置为我的输入字段。[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)，它会在旁边显示表格，该表格是绝对位置并包含我想要关注的“输入”。

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

标签： javascript

解决方案

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

相反，如果您在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>

推荐阅读