web-dev-qa-db-fra.com

Comment détecter les touches enfoncées sur le clic d'AngularJS

J'utilise angularjs sur une application web que j'ai besoin de comprendre comment puis-je détecter si des touches comme ctrl, shift ou alt sont enfoncées lorsque je clique sur un endroit.

par exemple, avec jquery je peux le faire en accédant aux arguments de la fonction Click.

Existe-t-il un moyen prêt à l'emploi pour obtenir ces informations sur l'angle?

javascriptangularjsjavascript-eventskeypress
23
Flavio Oliveira

Jetez un oeil à cette belle chose concernant manipulation des clés AngularJS

Donc, le code clé pour Ctrl, shift, alt sera

Ctrl - 17
Alt - 18
Maj - 16

Démo de travail

[~ # ~] html [~ # ~] 

<!DOCTYPE html>
<html>
<head>
  <script src="angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="mainModule">
  <div ng-controller="mainController">
    <label>Type something:
      <input type="text"
             ng-keydown="onKeyDown($event)"
             ng-keyup="onKeyUp($event)"
             ng-keypress="onKeyPress($event)" />
    </label><br />
    <strong>KEY DOWN RESULT:</strong> {{onKeyDownResult}}<br />
    <strong>KEY UP RESULT:</strong> {{onKeyUpResult}}<br />
    <strong>KEY PRESS RESULT:</strong> {{onKeyPressResult}}
  </div>
</body>
</html>

[~ # ~] script [~ # ~] 

angular.module("mainModule", [])
  .controller("mainController", function ($scope)
  {
    // Initialization
    $scope.onKeyDownResult = "";
    $scope.onKeyUpResult = "";
    $scope.onKeyPressResult = "";

    // Utility functions

    var getKeyboardEventResult = function (keyEvent, keyEventDesc)
    {
      return keyEventDesc + " (keyCode: " + (window.event ? keyEvent.keyCode : keyEvent.which) + ")";
    };

    // Event handlers
    $scope.onKeyDown = function ($event) {
      $scope.onKeyDownResult = getKeyboardEventResult($event, "Key down");
    };

    $scope.onKeyUp = function ($event) {
      $scope.onKeyUpResult = getKeyboardEventResult($event, "Key up");
    };

    $scope.onKeyPress = function ($event) {
      $scope.onKeyPressResult = getKeyboardEventResult($event, "Key press");
    };
  });
16
Nidhish Krishnan

Dans votre html

<button ng-click="doSomething($event)"></button>

Dans votre js

$scope.doSomething = function($event)
{
if ($event.altKey){}
if ($event.ctrlKey){}
if ($event.shiftKey){}
}
33
Flavien Volken

Si vous essayez de capturer une combinaison de touches, telle que Ctrl-Entrée, vous pouvez regarder l'objet fenêtre

Par exemple, pour trouver Ctrl-Enter, utilisez

if(window.event.keyCode == 13 && window.event.ctrlKey == true)
6
Victor Grazi

Il n'y a pas de moyen "automatisé" d'utiliser JS pur, mais il est relativement simple de suivre l'état des touches de modification dans les variables globales. Par exemple.

window.ctrlDown = false;

document.addEventListener('keydown', function(evt) {
  var e = window.event || evt;
  var key = e.which || e.keyCode;
  if(17 == key) {
    window.ctrlDown = true;
  }
}, false);

document.addEventListener('keyup', function(evt) {
  var e = window.event || evt;
  var key = e.which || e.keyCode;
  if(17 == key) {
    window.ctrlDown = false;
  }
}, false);
5
marekful

Comme je ne suis pas sûr de ce que propose chaque navigateur, je le ferais de cette façon:

shiftPressed = event.shiftKey || (event.keyCode === 16);

Sur Chorme par exemple, je ne vois aucun event.keyCode sur l'événement click:

altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 753
clientY: 193
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
isDefaultPrevented: ()
isImmediatePropagationStopped: ()
isTrusted: true
isTrusted: true
layerX: 4
layerY: -15
metaKey: false
movementX: 0
movementY: 0
offsetX: 4
offsetY: -15
pageX: 1381
pageY: 193
path: Array[16]
relatedTarget: null
returnValue: true
screenX: 753
screenY: 278
shiftKey: true
srcElement: span.glyphicon.glyphicon-plus
stopImmediatePropagation: ()
target: span.glyphicon.glyphicon-plus
timeStamp: 1445613423528
toElement: span.glyphicon.glyphicon-plus
type: "click"
view: Window
webkitMovementX: 0
webkitMovementY: 0
which: 1
x: 753
y: 193
2
Danielo515