我有一个简单的Bootstrap导航栏和一个下拉菜单。下拉菜单里有一个输入表单。我想要实现的简单任务是,在单击下拉按钮时,将光标放置在输入框中并聚焦它。
我查看了Stackoverflow,希望能找到解决方案,但它们都不适用于我的特定任务。我在输入元素上使用了autofocus属性。它部分地起作用,因为它在Chrome中第一次工作。但是,如果失去焦点一次,光标就不会回来。在Firefox中,自动对焦属性甚至不起作用。
第二种方法是通过JavaScript手动触发它。这也似乎行不通。 请告诉我是否有什么做错了,或者是否有更好的方法来实现这个目标。
HTML代码
我查看了Stackoverflow,希望能找到解决方案,但它们都不适用于我的特定任务。我在输入元素上使用了autofocus属性。它部分地起作用,因为它在Chrome中第一次工作。但是,如果失去焦点一次,光标就不会回来。在Firefox中,自动对焦属性甚至不起作用。
第二种方法是通过JavaScript手动触发它。这也似乎行不通。 请告诉我是否有什么做错了,或者是否有更好的方法来实现这个目标。
HTML代码
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="focusOnInput()">
Dropdown
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<input type="text" class="form-control" autofocus>
</div>
</li>
</ul>
</div>
</nav>
JS 代码
var focusOnInput = function(){
$('.dropdown-menu input').focus();
}