无法将 .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

元素在点击时存在，因此更改它的值并记录它会正确显示元素的当前状态。但是，它尚未显示，因此聚焦它不会真正产生任何效果。您可能可以重构库中的一些小 sn-p 以公开一个可用于使您的焦点工作的钩子。或者，您可以观察到在下一个事件处理程序中该元素将是可见的并使用一个小的超时。

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

Answer 2

我想到的最简单的解决方案就是延迟焦点。其不聚焦的原因是该元素尚不可见。

http://jsfiddle.net/xab7Leoq/

setTimeout(function() {
  $('#ha').focus();
}, 100);

另一种解决方案是找出它何时可见，然后执行此操作。它可能是一个更好但更复杂的解决方案。 :)

edit1：停止传播：

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

点赞http://jsfiddle.net/xab7Leoq/

Answer 3

想我也可以发布一个答案，即使迟到了......因为这似乎运作良好并且不需要 setTimeout：http://jsfiddle.net/cvLbfttL/

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

锚点“maa”在点击时获得焦点，它发生在点击回调/事件返回之后。因此，您可以改为在焦点事件中编写代码。我不知道如何在 JSFiddle 中标记到锚点，但我认为如果您使用其他方法将焦点设置到锚点，代码也会运行，但我认为这应该没问题，甚至可能很好。

Answer 4

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

http://jsfiddle.net/v62tdn9z/

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

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

Answer 5

在元素上设置 tabindex 可能是解决方案。这在我的情况下有效。