How to watch for a keypress combination in Angularjs? [duplicate]

后端未结

关注

 7  1103

一整个雨季

相关标签:

7条回答

礼貌的吻别

2021-02-06 01:47

I'm using a different way to do it.

$scope.keyboard = {
  buffer: [],
  detectCombination: function() {
    var codes = {};

    this.buffer.forEach(function(code) {
      codes['key_' + code] = 1;
    });

    if ((codes.key_91 || codes.key_93) && codes.key_8) {
      // I'm looking for 'command + delete'
    }
  },
  keydown: function($event) {
    this.buffer.push($event.keyCode);
    this.detectCombination();
  },
  keyup: function($event, week) {
    this.buffer = [];
  }
};

0 讨论(0)

忘了有多久

2021-02-06 01:59

This is all untested, but you could use ng-keypress

<body ng-keypress="logKeys($rootScope,$event)">...</body>

To call a function something like:

appCtrl.$scope.logKeys = function($rootScope,$event){
    $rootScope.keyLog.shift(); // Remove First Item of Array
    $rootScope.keyLog.push($event.keyCode); // Adds new key press to end of Array
    if($scope.$rootScope.keyLog[0] !== 38) { return false; } // 38 == up key
    if($scope.$rootScope.keyLog[1] !== 38) { return false; }
    if($scope.$rootScope.keyLog[2] !== 40) { return false; } // 40 = down key
    if($scope.$rootScope.keyLog[3] !== 40) { return false; }
    if($scope.$rootScope.keyLog[4] !== 27) { return false; } // 37 = left key
    if($scope.$rootScope.keyLog[5] !== 39) { return false; } // 39 = right key
    if($scope.$rootScope.keyLog[6] !== 37) { return false; }
    if($scope.$rootScope.keyLog[7] !== 39) { return false; }
    if($scope.$rootScope.keyLog[8] !== 65) { return false; } // 65 = a
    if($scope.$rootScope.keyLog[9] !== 66) { return false; } // 66 = b

    $rootScope.doThisWhenAllKeysPressed(); // Got this far, must all match!
    return true;
}

Outside an input field, I don't think ng-keypress works, but the keypress from angular-ui might.

I'm sure there should be an array diff kinda function too, but the specific call evades me right now.

0 讨论(0)

迷失自我

2021-02-06 02:00

If you are trying 'ctrl+s' or 'commond+s' ( change the commondKey ) to do save, maybe can use like it :

directive :

(function () {

  'use strict';
  var lastKey = 0;
  //var commondKey = 17;
  var commondKey = 91;
  angular
    .module('xinshu')
    .directive('saveEnter', function () {
      return function (scope, element, attrs) {
        element.bind("keydown", function (event) {
          if (event.which != commondKey && event.which != 83) {
            lastKey = 0;
          }
          if (lastKey == commondKey && event.which == 83) {
            scope.$apply(function () {
              scope.$eval(attrs.saveEnter);
            });
            event.preventDefault();
          }
          lastKey = event.which;
        });
      };
    });
})();

element :

<input id="title" save-enter="vm.saveTitle()"/>

You can rename the saveEnter in directive, with change the save-enter in html.

The 'vm.saveTitle()' is the fuc your want to do.

0 讨论(0)

余生分开走

2021-02-06 02:04
Looks like you can use the ng-keydown to do this.

Here is a working plunker.

For this sample, I just bound ng-keydown to <body>. Works pretty well to catch all the keyboard events globally.

As @charlietfl points out, ng-keydown registers a lot of keyboard events so to make this usable would be a lot of work. For example, if you were trying to listen for a combination (like ctrl + r), then the ctrl key will register many times.

JS:
```
var myApp = angular.module('myApp', []);

myApp.controller('Ctrl', function($scope) {


    $scope.keyBuffer = [];

    function arrays_equal(a,b) { return !(a<b || b<a); }

    $scope.down = function(e) {

      $scope.keyBuffer.push(e.keyCode);

      var upUp = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
      if (arrays_equal(upUp, $scope.keyBuffer)) {

        alert('thats it!');
      }
    };

  });
```
HTML:
```
<body ng-controller="Ctrl" ng-keydown="down($event)">
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

傲寒

2021-02-06 02:08

Detecting Backspace-Key (Mac) and Del-Key (PC):

<body ng-controller="Ctrl" ng-keydown="keyDown($event)">..<body>

$scope.keyDown = function(value){
    if(value.keyCode == 46 || value.keyCode == 8) {
        //alert('Delete Key Pressed');
    }
};

0 讨论(0)

离开以前

2021-02-06 02:11

Here's my take on it:

var app = angular.module('contra', []);
app.directive('code', function () {
    function codeState() {
        this.currentState = 0;
        this.keys = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
        this.keyPressed = function (key) {
            if (this.keys[this.currentState] == key) {
                this.currentState++;
                if (this.currentState == this.keys.length) {
                    this.currentState = 0;
                    return true;
                }
            } else {
                this.currentState = 0;
            }
            return false;
        };
    };
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var cs = new codeState();
            scope.isValid = "NO";
            element.bind("keydown", function (event) {
                scope.$apply(function () {
                    if (cs.keyPressed(event.which)) {
                        scope.isValid = "YES";
                        console.log("CODE ENTERED");
                    } else {
                        scope.isValid = "NO";
                    }
                });
            });
        }
    }
});

What's different about this is it's a directive so if you attach this on the body, it'll apply to the whole page. This also allows for entering the code multiple times.

Plunkr:

http://plnkr.co/edit/tISvsjYKYDrSvA8pu2St

0 讨论(0)

1 2 下一页

热议问题