当用户从输入字段中选择自动完成值时，如何保持Bootstrap下拉列表可见？

Question

我在主页上使用Bootstrap下拉列表作为登录可能性。下拉列表包含用户名和＆amp;密码字段。它运行良好，但当用户从（浏览器）自动完成功能中选择一个选项时，下拉列表会失去焦点并消失。

当用户选择自动填充选项时，如何保持下拉列表可见？

这是我的代码：

<div class="dropdown-menu user-actions-menu pull-right clearfix" role="menu">
<form method="POST" action="/login" accept-charset="UTF-8" role="form">

<div class="form-group">
    <input placeholder="E-mail adres" class="form-control input-lg" type="text" required="required" name="email">
</div>
<div class="form-group">
    <input placeholder="Type hier je wachtwoord" class="form-control input-lg" required="required" name="password" type="password" value="">
    <span class="help-block pull-right"><a href="account/wachtwoord-vergeten">Wachtwoord vergeten?</a></span>
</div>

<div class="form-group" style="clear:right;">
    <input name="remember" type="hidden" value="1">   
    <input class="btn btn-custom btn-flat btn-block" type="submit" value="Inloggen">
</div>
</form> 
</div>

我添加了一些图片以使其更清晰：

1：当有人将鼠标悬停在＆log;＆＃39; （=登录荷兰语）：

2：有人之前已经输入过电子邮件地址，因此浏览器会选择此选项：

3：用户使用鼠标指针和BAM将鼠标悬停在选项上：下拉列表消失（因为它丢失了鼠标悬停）：

Answer 1

它不是特定于Bootstrap。

这是一个使用jQuery的解决方案（适用于bootstrap或非bootstrap登录框）：

$('.dropdown').on('mouseover', function () {
    $('.dropdown-menu', this).show();
}).on('mouseout', function (e) {
    if (!$(e.target).is('input')) {
        $('.dropdown-menu', this).hide();
    }
});

感谢此解决方案的dtrunks：Div disappears when hovering the input autocomplete in Firefox