Question

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

enter image description here

当我点击下拉菜单时，会成功显示。 <input>的值已成功更改为Bonjour，但此<input>无法获得焦点。为什么？

如何将焦点放在包含在.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

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

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

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

http://jsfiddle.net/v62tdn9z/

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

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

Answer 4

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

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

主播＆＃34; maa＆＃34;单击时获得焦点，并在单击回调/事件返回后发生。因此，您可以在焦点事件中执行代码。我无法弄清楚如何在JSFiddle中找到锚点，但是我假设如果你使用其他方法将焦点设置为锚点，代码也会运行，但我认为这应该没问题，甚至可能很好。

无法将.focus（）提供给下拉菜单的元素

4 个答案: