無法將.focus（）賦予下拉菜單的元素

這是一個Boostrap導航欄，其中包含一個dropdown菜單，其中包含一個<input>。無法將.focus（）賦予下拉菜單的元素

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

來源

2014-09-30 Basj

jsFiddle Demo

元素存在於點擊時間，因此改變其值和記錄它會正確顯示元素的當前狀態。然而，它還沒有顯示出來，因此集中它並不會有任何效果。您可能可以重構庫中的一些小片段來公開一個可用於使焦點工作的鉤子。或者，您可以觀察到，在下一個事件處理程序中，元素將可見並使用一個小超時。

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

來源

2014-09-30 21:11:21

謝謝它的作品！但是，當我們點擊這個菜單，例如選擇框，下拉菜單消失......我們可以禁用自動消失的下拉菜單......只有當我們點擊下拉菜單之外時，設置纔會消失 – Basj 2014-09-30 21:21:31

當然，該輸入的click事件返回false。 '$（'＃ha'）。click（function（）{return false;}）;'http://jsfiddle.net/rzsmdg4f/11/ – 2014-09-30 21:22:01

Thanks @TravisJ。你可以在這裏看到這個動作：http://bigpicture.bi/jjwpi6！ :)'保存時生成新的URL'不起作用... – Basj 2014-09-30 21:27:06

我進來的一點是，只是延緩焦點的簡單的解決方案。它沒有聚焦的原因是因爲該元素尚未可見。

http://jsfiddle.net/xab7Leoq/

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

另一個解決辦法是找出當它變得可見，然後再去做。這可能是更好的解決方案，但更復雜。 :)

EDIT1：停止傳播：

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

像http://jsfiddle.net/xab7Leoq/

來源

2014-09-30 21:10:48

非常感謝！你知道爲什麼當我們點擊輸入時下拉菜單消失了嗎？我們是否可以禁用此功能，並且只有在外部點擊時才能使下拉菜單消失？ – Basj 2014-09-30 21:16:35

您需要停止傳播。我在我的回答中添加了這個。 – 2014-09-30 21:20:49

正在處理這個問題的答案，但是因爲你打敗了我......只是想補充一點，我不認爲這個問題是因爲它還不可見。如果您將輸入置於菜單之外（始終可見）並嘗試將焦點設置在該菜單上，則此功能也不起作用。我認爲關於下拉菜單的一些重點是點擊（在點擊事件返回之後）。你可能會注意到一個焦點事件或鼠標事件，但我只是去setTimeout，它的工作原理。 – eselk 2014-09-30 21:22:07

一個使用回調函數的例子。人避免使用setTimeout（）函數，因爲結果是不可預測的。

http://jsfiddle.net/v62tdn9z/

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

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

來源

2014-09-30 21:23:35 randiel

想通就算晚了，我還不如發帖回答...因爲這似乎運作良好，並不需要的setTimeout：http://jsfiddle.net/cvLbfttL/

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

錨「maa」在點擊時獲得焦點，並在點擊回調/事件返回後發生。所以你可以在焦點事件中做你的代碼。我無法弄清楚如何標籤到JSFiddle中的錨點，但我認爲如果你使用其他方法將焦點設置爲錨點，代碼也會運行，但這應該沒問題，我認爲，甚至可能很好。

來源

2014-09-30 21:34:15 eselk

無法將.focus（）賦予下拉菜單的元素

回答

相關問題