在AngularJS中，通过元素在div中移动时，使用onKeyUp和onKeyDown事件。

5 浏览
0 Comments

在AngularJS中，通过元素在div中移动时，使用onKeyUp和onKeyDown事件。

我有一个列表，并且我想用上/下键在列表中移动，但同时它也会滚动我的页面。我以为通过在事件上使用preventDefault可以解决这个问题，但实际上并不行。

Fiddle http://jsfiddle.net/mato75/wKJ26 

    
    
       
  • One
    • 
       
  • Two
    • 
       
  • Three
    • 
    

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

0

2 答案

0 Comments

问题的出现原因是在AngularJS的应用中，当使用键盘的上下箭头键选择列表项时，焦点未在div元素内部移动。

解决方法是在HTML代码中添加ng-keydown和ng-keyup指令来调用控制器中的keyDown和keyUp函数，并在控制器中编写相应的逻辑来实现焦点在div元素内部移动的功能。具体代码如下：

HTML代码：


  
{{item}}

JavaScript代码：

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;
    }
  }
  $scope.keyUp = function (event) {
    // 在这里可以添加其他的逻辑
  }
}]);

通过添加ng-keydown和ng-keyup指令，并在控制器中编写相应的逻辑，可以实现在AngularJS应用中使用键盘上下箭头键选择列表项，并实现焦点在div元素内部移动的功能。

0
0 Comments

问题的出现原因是在HTML代码中，keyup和keydown事件处理函数的引用中，多了一个字母"on"。此外，还需要在div元素上添加tabindex属性，以便它能够接收焦点并使事件能够从中传播。

解决方法是删除事件处理函数引用中的多余的字母"on"，并在div元素上添加tabindex属性。

以下是修复后的HTML代码：



  
    
    
    
  
  
    
Hello Plunker!

    

      

        
    
          
  • One
    • 
          
  • Two
    • 
          
  • Three
    • 
        

      

    

    

      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff
      Stuff

修复后的JS代码：

// 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元素获得焦点，然后按键测试效果。

0