代码之家 › 专栏 › 技术社区 › SpaceDogCS

无法强制关注输入

focus input html jquery javascript

SpaceDogCS · 技术社区 · 7 年前

我在努力集中注意力 input 在a中单击后 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浏览器

解决方案

我检查了塞巴斯蒂安·斯佩特尔(SebastianSpeitel)的答案作为正确答案,因为它很有用,但我的问题实际上是在css中,我的输入是关于属性的 visibility: hidden 甚至我也改变了 visibility: visible 点击后 跨度 它没有聚焦,移除此属性解决了我的问题

2 回复 | 直到 6 年前

Sebastian Speitel 7 年前

我认为您想要实现的是相同的功能, <label> s代表。您可以通过将 <span> 和 <input> 在一个。

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

Zenoo 7 年前

它只使用 .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>

推荐文章

Thinkpad · Excel引用基于字符串的范围

2 年前

DwightD · Python 3中的用户输入和排序列表

6 年前

Hans Daigle · Python交互式控制台使用curses lib getstr()函数不等待用户输入

6 年前

ÐÐ¸ÐºÐ¸ÑÐ° Ð¨Ð¸ÑÐºÐ¸Ð½ · 如何从字符串(Python3)创建函数[已关闭]

6 年前

Wacky Mode-On · Python:3-在找到关键字后将字符串设为变量?

6 年前

P S · 在laravel 5.5中输入不起作用时重定向回

6 年前

Paul · 如何在输入值中包含图像

6 年前

Mose · c++中带有输入函数的Lambda auto给出错误

7 年前

Henri Wurm · 首先将第一个输入保存到文件夹中,然后引用它

7 年前

Andres Concha · 如何使用Vue设置和获取输入组件的值。js?

7 年前