无法使用键盘选择引导下拉列表的项目

Question

我有一个包含时区信息的引导下拉菜单。下拉列表已正确填充，但是当我单击下拉列表并按键盘上的某个键（例如“P”）时，它不会在列表中选择适当的项目。下拉菜单的代码如下。

HTML

<select class="form-control" name="timeZone" ng-model="engagement.timeZone" ng-init="engagement.timeZone=timezones[37].code" ng-options="timeZone.code as timeZone.name for timeZone in timezones" required></select>

输出是这样的。

我想要的是，如果我在键盘上按 A，则应选择与该字母匹配的第一个项目。 （不要与类似过滤的行为混淆）

更新

这似乎与引导程序无关。我删除了所有引导类，它仍然是一样的。可能与 Angular 有关？

Answer 1

如您所知，使用 Boostrap drop-down 组件时，您无法通过按 Keyboard Letter 来选择元素。因此，您可以使用以下使用directive 的代码；

myApp.directive('keypressEvents',

    function ($document, $rootScope) {

    return {

    restrict: 'A',

    link: function (scope, element, attr) {

        console.log('linked');

        $document.bind('keypress', function (e) {

        $rootScope.$broadcast('keypress', e,  String.fromCharCode(e.which)); 

        var letter = String.fromCharCode(e.which);

        var target = e.target;

        var charat = element[0].textContent.charAt(0);

        if(charat === letter){ 

           element.addClass("red");

        }

      });

    }

  }

});

在那里，您可以看到所使用的指令，它只是限制在按键上，最后为找到的具有相同首字母的元素设置类。不过，您只需要将重点放在此上即可；

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   Dropup
   <span class="caret"></span>
  </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <li keypress-events><a href="#">action</a></li> 
       <li keypress-events><a href="#">something else here</a></li> 
     </ul>
</div>

如您所见，该指令已绑定在 li elements 上。