javascript - 无法将 .focus() 赋予下拉菜单的元素

Question

这是一个 Boostrap 导航栏，包含一个 dropdown菜单，包含一个 <input> .

当我点击下拉菜单时，它显示成功。 <input> 的值成功改成Bonjour但是这个<input>没有得到焦点。为什么？

http://jsfiddle.net/rzsmdg4f/1/

如何使用 .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>

JS:

{
    var maa = document.getElementById('maa');
    console.log(maa);
    maa.addEventListener('click', function () {
        console.log($('#ha'));
        $('#ha').val('Bonjour');
        $('#ha').focus();
    });
};

Answer 1

jsFiddle Demo

该元素在单击时存在，因此更改其值并记录它会正确显示该元素的当前状态。但是，它还没有显示出来，因此聚焦它并不会真正起到任何作用。您可能会重构库中的一些小片段以公开一个 Hook ，您可以使用它来让您的焦点发挥作用。或者，您可以观察到在紧接着的下一个事件处理程序中元素将可见并使用一个小的超时。

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