2017-05-29 6 views
2

Html:Prevent Dropdown schließen auf keydown

<input id="input-smth`enter code here`" type="text" name="region" placeholder="Region" /> 

<ul class="nav"> <!-- "KB Menu" --> 
    <li class="dropdown kb_menu hideit"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Knowledge Bases<b class="caret"></b></a> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" id="kb_menu"> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     </ul> 
    </li> 
</ul> 

Javascript:

$('#input-smth').on('keydown', function(event){ 
    $('#kb_menu').dropdown('toggle'); 
    event.stopPropagation(); 

}); 

Wenn Drop-Down-Eingabe öffnet, dann aber auf dem zweiten Typ, es schließt. Wie kann man das Umschalten verhindern und das Dropdown-Menü öffnen, wenn ich weiter tippe?

Antwort

3

Da Sie toggle verwenden wird es nur das tun, Knebel (Ein-/Ausblenden) für jeden keydown.

Sie können die keydown verwenden, um eine Schaltfläche anzuzeigen oder hinzuzufügen, um sie zu schließen oder auszublenden, wenn sie nicht im Fokus steht.

Shows auf keydown versteckt, wenn focusout:

$('#input-smth').on('keydown', function(event){ 
    $('#kb_menu').show(); 
    event.stopPropagation(); 
}); 

$("#input-smth").focusout(function() { 
    $('#kb_menu').hide(); 
}); 

Auch JsFiddle

+0

Dank. Es half. – ILya

+0

Froh, zu helfen. :) – Hevar

0

Wenn Sie toggle zu open ändern?

$('#kb_menu').dropdown('open'); 

Ich kann nur raten open eine Lösung sein kann, wie ich weiß nicht, welche Dropdown Plugin Sie verwenden.


Andernfalls wird eine einfache Steuerung sollte es tun:

var isOpen = false; 
$('#input-smth').on('keydown', function(event){ 
    // If is open don't go any further 
    if (isOpen) { return } 
    // Otherwise toggle the menu 
    $('#kb_menu').dropdown('toggle'); 
    event.stopPropagation(); 
    isOpen = true 
}); 
Verwandte Themen