代码之家 › 专栏 › 技术社区 › 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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Alex · 在轻量级中同时解构和不解构变量

5 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

5 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

5 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前