Javascript 无法为下拉菜单的元素提供.focus（）

这是一个Boostrap导航栏，包含一个

下拉菜单，它本身包含一个


当我点击下拉菜单时，它成功地显示出来。
的值已成功更改为
Bonjour
，但此
未获得焦点。为什么?


如何使用
.focus（）
？


代码：

<div class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="maa">Dropdown<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu" style="min-width: 250px;">
                    <li>
                        <div style="padding:4px 20px;">Link:</div>
                    </li>
                    <li>
                        <div style="padding:4px 20px;">
                            <input class="form-control" id="ha" type="text" placeholder="blabla" />
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

我想到的最简单的解决办法就是延迟焦点。它没有聚焦的原因是因为元素还不可见


另一个解决方案是找出它何时变得可见，然后再去做。这可能是一个更好的解决方案，但更为复杂。：）

edit1:停止传播：

// Prevents the propagation
$('#ha').click(function(ev) {
  ev.stopPropagation();
});

就像在

元素在单击时存在，因此更改其值并记录它将正确显示元素的当前状态。然而，它还没有被显示出来，因此聚焦它不会真正产生任何效果。您可能会重构库中的一些小片段，以公开一个钩子，您可以使用该钩子使焦点工作。或者，您可以观察到，在下一个事件处理程序中，元素将可见，并使用一个小的超时

maa.addEventListener('click', function () {
    console.log($('#ha'));
    $('#ha').val('Bonjour');
    setTimeout(function(){$('#ha').focus();},10);//timeout here
});

一个使用回调函数的示例。避免使用setTimeout（）函数，因为结果是不可预测的


我想我可能会发布一个答案，即使晚了。。。由于这似乎工作正常，不需要设置超时：

锚定“maa”在单击时获得焦点，它发生在单击回调/事件返回之后。因此，您可以在焦点事件中执行代码。我不知道如何在JSFIDLE中标记锚点，但我假设如果您使用其他方法将焦点设置为锚点，代码也会运行，但我认为这应该很好，甚至可能很好。
在元素上有一个tabindex可能是解决方案。这对我来说很有效。
谢谢！你知道为什么当我们点击输入时下拉菜单消失了吗？我们是否可以禁用此功能，并仅在单击外部时使下拉列表消失？您需要停止传播。我在我的答案上加了这个。我也在做这个的答案，但既然你赢了我。。。我只是想补充一下，我不认为问题在于它还不可见。如果您将一个输入置于菜单之外（始终可见），并尝试将焦点设置为该输入，则该输入也不起作用。我认为下拉菜单中的某些内容将焦点放在单击上（单击事件返回后）。您可能会观察焦点事件或鼠标移动事件，但我只想使用setTimeout，它可以工作。如果您要向该下拉列表（或其他）添加更多输入字段，我将以$（'.dropdown menu input'）为目标，而不仅仅是单个输入元素。只是一个想法。谢谢。它很有效！但是当我们点击这个菜单，例如选择框，下拉菜单消失。。。我们可以禁用自动消失的下拉列表。。。设置“仅当我们在下拉菜单外单击时消失”，只需使该输入的单击事件返回false<代码>$（'#ha'）。单击（函数（）{return false；}）谢谢@TravisJ。您已经可以在此处看到此操作：！：）“保存时生成新URL”还不起作用…您知道如何在有焦点时删除
的默认Boostrap，如
高亮显示
。#ha:focus{transition:none；box shadow:none；border:default；}请包含一些代码（理想情况下带有可运行的“代码片段”），以使此答案有用。
// Prevents the propagation
$('#ha').click(function(ev) {
  ev.stopPropagation();
});

maa.addEventListener('click', function () {
    console.log($('#ha'));
    $('#ha').val('Bonjour');
    setTimeout(function(){$('#ha').focus();},10);//timeout here
});

var $maa=$('#maa'), $ha=$('#ha');

$maa.mousedown( function () {
    $ha.val('Bonjour');
    $maa.mousemove(function () { $ha.focus(); });
});

$("#maa").focus(function () {
    $('#ha').val('Bonjour');
    $('#ha').focus();
    return false;
});
$('#ha').click(function(){return false;});