无法强制专注于输入答案

【问题标题】：Can't force focus on input无法强制专注于输入
【发布时间】：2018-03-23 12:50:57
【问题描述】：

单击span 后，我试图聚焦input，input 不可见，但当我单击span 时，它变得可见

<form action="{{ route('busca') }}" method="get">
    <span class="pesquisa-icon"></span>
    <input id="q" type="text" name="q" placeholder="Digite o que precisa e pressione ENTER..."/>
</form>

使用 jQuery，我成为可见的输入

$(this).closest('.menu').addClass('pesquisa-open');
$(this).siblings('input').focus();

但它没有成为焦点，即使在浏览器中，我在浏览器控制台中尝试了$('#q').focus()（输入可见）并且它没有焦点。

我正在使用 Opera 浏览器

解决方案

我检查了 Sebastian Speitel 的答案是正确的答案，因为它很有帮助，但我的问题实际上是在 css 中，我的输入是属性visibility: hidden，甚至我在点击span 后更改为visibility: visible 它没有' t专注，删除这个属性解决了我的问题

【问题讨论】：

标签： javascript jquery html input focus

【解决方案1】：

我认为你想要实现的是相同的功能，<label>s 是为了。您可以通过将<span> 和<input> 封装在一个中来简单地实现一个。

在此处阅读有关它们的更多信息：https://www.w3schools.com/tags/tag_label.asp

【讨论】：

【解决方案2】：

仅使用 .focus() 即可工作。

看这个演示：

$('.pesquisa-icon').on('click', function(){
  $(this).next().addClass('shown').focus();
});

#q{
  display: none;
}

#q.shown{
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="get">
    <span class="pesquisa-icon">TEST</span>
    <input id="q" type="text" name="q" placeholder="Digite o que precisa e pressione ENTER..."/>
</form>

【讨论】：