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

Question

我有一个带有时区信息的bootstrap下拉菜单。下拉列表已正确填充，但是当我单击下拉列表并按下键盘上的某个键时（例如＆＃34; P＆＃34;），它不会在列表中选择适当的项目。下拉列表的代码如下所示。

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，则应选择与该字母匹配的第一项。 （不要混淆过滤行为）

更新

这似乎与bootstrap根本没有关系。我删除了所有的bootstrap类，它仍然是相同的。可能与Angular有关吗？

Answer 1

如您所知，使用 Boostrap drop-down组件，您无法通过按键盘字母来选择元素。因此，您可以使用以下使用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");

        }

      });

    }

  }

});

在那里，你可以看到使用的指令，它只是在keypressed上绑定，最后设置了使用相同的第一个字母找到的元素的类。不过，你只需要关注这一点;

<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。

上界定