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?
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
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");
};
});
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);
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)
Dla kątowego powinieneś użyć '$ event' zamiast' window.event'. –
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){}
}
Znacznie prostsze niż wszystkie inne alternatywy. Sprawdził się doskonale, gdy potrzebowałem sprawdzić klawisz Ctrl. –
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
@PMBjornerud, w jaki sposób można wykryć klawisz polecenia. możesz opublikować fragment kodu lub coś takiego. dzięki – harshitgupta
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
Doskonale, że działa idealnie, wystarczy dodać wydarzenie $. Dzięki –