2014-05-14 15 views
20

Używam angularjs na webapplication, że muszę dowiedzieć się, jak mogę wykryć klawisze takie jak ctrl, shift lub alt są wciśnięte, gdy klikam gdzieś.Jak wykrywać wciśnięte klawisze na kliknięcie AngularJS

na przykład, z jquery mogę to zrobić, uzyskując dostęp do argumentów funkcji Click.

Czy jest jakiś gotowy sposób uzyskania tych informacji na kanciastych?

Odpowiedz

14

Spójrz na tym pięknym Stuff dotyczących AngularJS key handling

kod tak kluczową dla ctrl, shift, alt będzie

Ctrl - 17
Alt - 18
SHIFT - 16

Working Demo

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

Doskonale, że działa idealnie, wystarczy dodać wydarzenie $. Dzięki –

4

Nie ma "automatyczny" sposób za pomocą czystych JS, ale jest to stosunkowo proste do śledzenia stanu klawiszy modyfikujących w zmiennych globalnych. Na przykład.

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

Jeśli próbujesz uchwycić kombinację klawiszy, takich jak Ctrl-Enter, można spojrzeć na obiekt okna

Na przykład, aby znaleźć Ctrl-Enter Użyj

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

Dla kątowego powinieneś użyć '$ event' zamiast' window.event'. –

28

W Twój html

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

W swoim js

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

Znacznie prostsze niż wszystkie inne alternatywy. Sprawdził się doskonale, gdy potrzebowałem sprawdzić klawisz Ctrl. –

+1

Uwaga: ctrlKey nie będzie działać zgodnie z oczekiwaniami na Macu, ponieważ spowoduje to wywołanie menu kontekstowego. Mac używa do tego klawisza polecenia. – PMBjornerud

+1

@PMBjornerud, w jaki sposób można wykryć klawisz polecenia. możesz opublikować fragment kodu lub coś takiego. dzięki – harshitgupta

2

Ponieważ nie jestem pewien, co każda przeglądarka zapewnia, chciałbym zrobić to w ten sposób:

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

Na Chorme na przykład ja nie widzę żadnych event.keyCode na razie kliknij:

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 
Powiązane problemy