onKeyUp onKeyDown 通过 AngularJS 元素在 div 内移动答案

【问题标题】：onKeyUp onKeyDown move inside the div through the elements AngularJSonKeyUp onKeyDown 通过 AngularJS 元素在 div 内移动
【发布时间】：2014-03-22 19:20:02
【问题描述】：

我有一个列表，我想用上/下键在该列表中移动，但它也会滚动浏览我的页面。我认为通过事件的 preventDefault 可以解决问题，但没有。

小提琴http://jsfiddle.net/mato75/wKJ26

<div ng-onkeyup="moveUp($event)" ng-onkeydown="moveDown($event)">
    <ul>
       <li>One</li>
       <li>Two</li>
       <li>Three</li>
    </ul>
</div>

scope.moveUp = function (event) {
   moveUp();
   event.preventDefault();
}


scope.moveDown = function (event) {
  moveDown();
  event.preventDefault();
}

【问题讨论】：

你能用 plunkr 或 fiddle 复制吗，看来这应该可以。
这似乎非常接近这个问题的答案：stackoverflow.com/questions/11264188/…
这是一个小提琴jsfiddle.net/mato75/wKJ26

标签： css html angularjs

【解决方案1】：

好吧，你明白了，你在提到 keyup 和 keydown 处理程序时已经说过了，你还需要在 div 上设置一个 tabindex 以便它可以接收焦点并且事件可以从中传播http://plnkr.co/edit/dUSFZT2TfHIfY18GUDp0

HTML

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <h1>Hello Plunker!</h1>
    <div ng-controller="MyCtrl">
      <div tabindex=1  ng-keyup="moveUp($event)" ng-keydown="moveDown($event)">
        <ul>
         <li>One
         </li>
         <li>Two</li>
         <li>Three</li>
        </ul>
      </div>
    </div>
    <div>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
    </div>
  </body>

</html>

// Code goes here

angular.module("myApp", []).controller("MyCtrl", function($scope){
  $scope.moveUp = function (event) {
     event.preventDefault();
     console.log("move up")
  }
  $scope.moveDown = function (event) {
    event.preventDefault();
    console.log("move down")
  }
});

【讨论】：

你能在 chrome 中更具体地工作吗，点击列表给 div 焦点，然后点击键

【解决方案2】：

这是一个例子，http://jsfiddle.net/mato75/wKJ26/3/

angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.list = ['item1', 'item2', 'item3', 'item4', 'item5'];

$scope.selected = 'item2';

$scope.isSelected = function(item) {
    return item === $scope.selected ? 'active' : '';
}


$scope.selectItem = function (item) {
    $scope.selected = item;
}

$scope.keyDown = function (event) {
    var indx = $scope.list.indexOf($scope.selected);
    switch(event.keyCode) {
        case 40:
            var nIndx = indx === $scope.list.length - 1 ? 0 : indx + 1;
            var item = $scope.list[nIndx];
            $scope.selectItem(item);
            event.preventDefault();
            break;
        case 38:
            var nIndx = indx ===  0 ? $scope.list.length - 1 : indx - 1;
            var item = $scope.list[nIndx];
            $scope.selectItem(item);  
            event.preventDefault();              
            break
    }
}           
}]);

【讨论】：