Bootstrap下拉菜單阻止鍵

Question

我有一個輸入字段，可在輸入時通過下拉菜單顯示建議。 我的例子簡化了，但是問題是一樣的。 如果我將焦點放在頂部菜單項上，然后按向上箭頭鍵，則希望將焦點設置在輸入字段上（不關閉菜單）。 Bootstrap似乎正在阻止某些鍵的事件冒泡。

退出鍵僅用於測試。 這是我要使用的向上箭頭鍵。

您可以在此處找到jsfiddle。

EVENT       KEY        RESULT
keypress    [any]      not working
keydown     arrowup    not working
keydown     escape     working
keyup       arrowup    working, but will move focus when on second item too

HTML：

<div class="dropdown">
    <input type="text" class="form-control">
    <ul class="dropdown-menu" role="menu">
        <li><a href="#" id='AAAA'>AAAA</a></li>
        <li><a href="#">BBBB</a></li>
        <li><a href="#">CCCC</a></li>
    </ul>
</div>

JS：

$('.form-control').bind('keypress', function(event) {
    if (event.key === 'ArrowDown') {
        if ($('.dropdown').hasClass('open')) {
            $('#AAAA').focus();
        } else {
            $('.dropdown').addClass('open');
        }
    }
});

$('#AAAA').bind('keyup', function(event) {
    switch (event.key) {
        case 'ArrowUp':
            $('.form-control').focus();
            break;
        case 'Escape':
            $('.form-control').focus();
            break;
    }
});

Answer 1

好吧，我首先關閉了下拉列表（刪除了open類），然后專注於輸入。 它現在似乎正在工作。

$('#AAAA').bind('keydown', function(event) {
        switch (event.key) {
            case 'ArrowUp':
                $('.dropdown').removeClass('open');
                $('input').focus();
            break;
        case 'Escape':
                $('.form-control').focus();
            break;
    }
});

編輯（更新問題后）：引導程序正在使用keydown 。 您可以在keyup上綁定所有事件。 keyup后，事件觸發keydown ，這樣你就不需要使用setTimeout()

$('#AAAA').bind('keyup', function(event) {
        switch (event.key) {
            case 'ArrowUp':
                $('.form-control').focus();
            break;
        case 'Escape':
                $('.form-control').focus();
            break;
    }
});

編輯2（解決：如果在第二個項目上按向上鍵，則將釋放第一個項目上的鍵，並將焦點放在輸入上）我一直使用setTimeout()來使引導程序完成自己的操作工作。 這也將使keypress從下到上工作。 jsFiddle鏈接

$('.dropdown').on('keydown.bs.dropdown.data-api', function(e) {

  var index = $(this).find('li:not(.disabled):visible a').index(e.target);

  if (!index && e.which == 38) {
    setTimeout(function() {
      $('.form-control').focus();
    }, 1);
  }
});

Answer 2

我這樣解決了它，直到有人找到更好的解決方案為止。 我將focus（）包裝在計時器中。

$('#AAAA').bind('keydown', function(event) {
    switch (event.key) {
        case 'ArrowUp':
            setTimeout(function() {
                $('.form-control').focus();
            }, 1);
            break;
        case 'Escape':
            $('.form-control').focus();
            break;
    }
});