无法强制专注于输入

Question

我试图在单击 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，甚至我改为visibility: visible 单击 span 后它没有聚焦，删除此属性解决了我的问题

Answer 1

仅使用 .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>

Answer 2

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

在这里阅读更多关于它们的信息：https://www.w3schools.com/tags/tag_label.asp

无法强制专注于输入

Can't force focus on input

html

javascript

jquery

focus

input