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