Question

HTML：

<input type="text" placeholder="Enter some data" />
<div class="dropdown" style="width:200px">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true" style="width:100%; text-align:left">
        {{selectedSite}}
    <span class="caret" style="left: 90%;top: 45%;position: absolute;" tabindex="-1"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" >
        <li ng-repeat="site in sites"role="presentation"><a role="menuitem" tabindex="-1" ng-click="setSelectedSiteVal(site)">{{site}}</a></li>
    </ul>
</div>

控制器：

$scope.sites = ["A", "B", "C", "D"];
$scope.selectedSite = $scope.sites[0];

$scope.setSelectedSiteVal = function(siteName){
    $scope.selectedSite = siteName;
}

在第一个文本框中输入一些数据后，如果我们点击了标签＆＃39;然后进入＆＃39;键，它显示下拉列表。但是，我无法使用键盘事件从下拉列表中选择任何特定项目。我可以使用鼠标指针选择下拉菜单，但不能选择键盘事件。有任何帮助或建议吗？

http://plnkr.co/edit/gvIYdi23Yu2svbG1sqz6?p=preview

Answer 1

我分叉了你的傻瓜here。我在页面中添加了一些javascript来监听回车键。我注释掉了我认为应该运行的代码，但是因为没有包含该函数。

    $(document).ready(function(){
      $(document).on('keypress', '.dropdown-menu>li>a', function(e){
        if(e.which==13){
          //setSelectedSiteVal($(this).text());
          $(this).closest('.dropdown').find('.dropdown-toggle').text($(this).text())
        }
      });
    })

HTH

-Ted

Bootstrap下拉列表无法使用键盘事件

1 个答案: