我正在为客户创建一个工作页面，带有一个滑出搜索栏。当我单击打开搜索输入字段的按钮（它从隐藏开始）时，我希望焦点（光标）移动到搜索栏（输入）。
出于某种奇怪的原因，我似乎能够获得焦点来切换输入字段的唯一方法是，如果我将其放入最短时间约为 50 毫秒的 setTimeout 中（我尝试了 0，但不起作用）。
奇怪的警告 - 当我关闭搜索栏（单击隐藏搜索的打开/关闭按钮）时，我可以暂时使输入字段获得焦点/光标，但当它打开时不会，这就是我想要的。除非它在 setTimeout ....
将焦点设置为其他内容，然后对其进行模糊处理，然后将焦点设置为我的输入字段。[X]
用 0 ms [x]包裹.focus()asetTimeout
将焦点设置为我创建的不同的“测试”输入字段。[作品]
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>为了更快地理解，您单击图标 …
javascript ×1