無法將.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

該元素在單擊時存在，因此更改其值並記錄它將正確顯示元素的當前狀態。 但是，它尚未顯示，因此聚焦它不會產生任何影響。 您可能可能會重構庫中的一些小片段以顯示可用於使焦點工作的鈎子。 或者，您可以觀察到，在下一個事件處理程序中，元素將可見並使用較小的超時。

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;});

錨點“maa”在單擊時獲得焦點，並且在單擊回調/事件返回后發生。 因此，您可以在焦點事件中執行代碼。 我無法弄清楚如何在JSFiddle中選中標簽，但是我假設如果你使用其他方法將焦點設置為錨點，代碼也會運行，但我認為這應該沒問題，甚至可能很好。

Answer 5

在元素上有tabindex可能是解決方案。 這適用於我的情況。