Javascript 为什么JS.focus（）只能在50毫秒或更长的setTimeout内工作 问题

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

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

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

我试过的 将焦点设置为其他内容，然后模糊该内容，然后将焦点设置为我的输入字段。[x]

• 将

  .focus（）
  

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

• 将

  tabindex

  添加到-1[x]的输入中

const icon=document.getElementById（“搜索图标”）；
const form=document.getElementById（“搜索表单”）；
常量输入=document.getElementById（“搜索输入”）；
icon.parentElement.addEventListener（“单击”，e=>{
form.classList.toggle（“可见”）；
icon.classList.toggle（“fa搜索”）；
icon.classList.toggle（“fa时间”）；
setTimeout（（）=>input.focus（），50）；
});

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

相反，如果您在
mouseup
事件中执行此操作，则您只需单击即可立即更改焦点，无需延迟，因为此时鼠标按钮被释放。见下文


编辑
再想想。。。我再也不确定了。复制了您的代码并删除了延迟，但效果很好


const icon=document.getElementById（“搜索图标”）；
const form=document.getElementById（“搜索表单”）；
常量输入=document.getElementById（“搜索输入”）；
icon.parentElement.addEventListener（“单击”，e=>{
form.classList.toggle（“可见”）；
icon.classList.toggle（“fa搜索”）；
icon.classList.toggle（“fa时间”）；
input.focus（）；
});

点击我
搜索
好的，这是有道理的，但有两件事：-为什么设置超时1的毫秒时间不起作用。-为什么setTimeout 0上的毫秒时间不起作用（假设这仍然会使它在其他一切完成后发生？）。这是因为setTimeout中的回调没有与JS竞争，而是浏览器功能的工作？（很抱歉我的知识不全）。如果您单击并按住鼠标按钮一段时间，然后释放它，会发生什么情况？在您的问题中提供一个工作代码示例会很有帮助。哈，抱歉-再次编辑它！你的代码毫不延迟地对我来说很好。也许是别的原因？是否您正在向表单中添加一个
可见的
类？我想这意味着它最初是隐藏的，您不能将焦点设置在隐藏的元素上。@AlexisWilke我删除了转换，删除了setTimeout，它正在工作！因此，这大概与此有关。但奇怪的是，如果我将转换时间减少到.125s，setTimeout仍然只能在最小持续时间约为15（0015ms）的情况下工作。奇怪……我编辑了你的问题，这样代码就可以运行了，图标元素也可以看到&clickable你的浏览器是什么？我的浏览器是Chrome，尽管Firefox和Safari中也发生了同样的事情。克里斯，另一个聊天阻止我添加评论，我现在还不能“聊天”。我将一个可见类添加到输入中，是的，这会取消隐藏它，但这是在焦点之前发生的吗？