Question

我在点击input后尝试关注span，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 Browser

解

我检查了Sebastian Speitel的答案是正确的答案，因为它有用，但我的问题实际上是在css中，我的输入是使用属性visibility: hidden，甚至在点击{{{}后更改为visibility: visible 1}}它没有集中，删除此属性解决了我的问题

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>是。您可以通过将<span>和<input>括在一个中来实现一个。

点击此处了解更多相关信息：https://www.w3schools.com/tags/tag_label.asp

无法强调输入

2 个答案: