open javascript angularjs javascript-events keypress

javascript - $window.open angularjs



Cómo detectar teclas pulsadas en el clic de AngularJS (5)

Como no estoy seguro de lo que proporciona cada navegador, lo haría de esta manera:

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

En Chorme, por ejemplo, no puedo ver ningún event.keyCode en el evento 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

Estoy usando angularjs en una aplicación web que necesito para averiguar cómo puedo detectar si se presionan teclas como ctrl, shift o alt cuando hago clic en algún lugar.

por ejemplo, con jquery puedo hacerlo accediendo a los argumentos de la función Click.

¿Hay alguna forma inmediata de obtener esa información en angular?


Echa un vistazo a este hermoso material sobre el manejo de claves AngularJS

Así que el código clave para Ctrl, shift, alt será

Ctrl - 17
Alt - 18
Shift - 16

Demo de trabajo

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>

GUIÓN

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


En tu html

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

En tus js

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


No hay una forma "automatizada" de usar JS puro, pero es relativamente sencillo rastrear el estado de las claves modificadoras en las variables globales. P.ej

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


Si está intentando capturar una combinación de teclas, como Ctrl-Enter, puede mirar el objeto de la ventana

Por ejemplo para encontrar Ctrl-Enter use

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