Css onKeyUp onKeyDown通过元素AngularJS在div内移动_Css_Html_Angularjs

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

css html angularjs

Css onKeyUp onKeyDown通过元素AngularJS在div内移动,css,html,angularjs,Css,Html,Angularjs,我有一个列表，我想用上/下键浏览该列表，但它也会在我的页面上滚动。我认为默认情况下，这可以解决问题，但事实并非如此拨弄一个两个三 scope.moveUp=函数（事件）{ moveUp（）； event.preventDefault（）； } scope.moveDown=函数（事件）{ 向下移动（）； event.preventDefault（）； } 好的，我想好了，在对keypup和keypdown处理程序的引用中，您已经打开了这个词，而且您还需要在div上设置一个tabin

我有一个列表，我想用上/下键浏览该列表，但它也会在我的页面上滚动。我认为默认情况下，这可以解决问题，但事实并非如此

拨弄



一个
两个
三

scope.moveUp=函数（事件）{
moveUp（）；
event.preventDefault（）；
}
scope.moveDown=函数（事件）{
向下移动（）；
event.preventDefault（）；
}

好的，我想好了，在对keypup和keypdown处理程序的引用中，您已经打开了这个词，而且您还需要在div上设置一个tabindex，以便它可以接收焦点，事件可以从中传播

HTML

举个例子,

你能不能在一个plunkr或fiddle中复制，看来这应该行得通。这似乎非常接近这个问题的答案：这是一个fiddle，你能在chrome中更具体地工作吗，单击列表以给出div焦点，然后点击按键

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

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

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