点击下拉菜单时自动聚焦输入框

Question

我有一个简单的Bootstrap导航栏和一个下拉菜单。下拉菜单里有一个输入表单。我想要实现的简单任务是，在单击下拉按钮时，将光标放置在输入框中并聚焦它。

我查看了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();
}

Codepen链接

- Vishnu Y S

Answer 1

您需要使用shown.bs.dropdown事件：

此事件在下拉菜单已对用户可见时触发（将等待CSS过渡完成）。

$('.dropdown').on('shown.bs.dropdown', function(e) {
    $('.dropdown-menu input').focus();
})

$('.dropdown').on('shown.bs.dropdown', function(e) {
    $('.dropdown-menu input').focus();
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<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">
                    Dropdown
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                    <input type="text" class="form-control" autofocus>
                </div>
            </li>
        </ul>
    </div>
</nav>

- gaetanoM

---

这应该是被接受的答案。始终使用事件而不是setTimemout。 - VVV

Answer 2

在链接中：a class="nav-link dropdown-toggle"

只需添加：

onclick="setTimeout(focusOnInput, 1000)"

替代

onclick="focusOnInput()"

这将延迟函数的执行1秒钟，直到元素可点击...

当然，如果您想更快地执行，请将1000更改为其他数字...这些是毫秒...

祝好运

- Elydasian

---

虽然这个方法可行，但它只是一个平庸的hack。我建议使用Bootstrap的下拉事件。 - VVV

对于我提出的问题，上面的答案很好。然而，我没有提供完整的代码细节。对于我的特定情况来说，这个比上面那个更好用。 - Vishnu Y S

@Vishnu Y S 很高兴我能帮到你。 - Elydasian

Answer 3

为输入框添加唯一的id。 例如：

使用onclick事件聚焦输入表单。 当用户点击下拉输入时进行聚焦。

var input = document.getElementById("D-input");
function focusOnInput() {
input.focus();
}

我希望它能对你有所帮助。

- Kannada Time