Sto usando angularjs su un'applicazione web che ho bisogno di capire come posso rilevare i tasti come ctrl, shift o alt vengono premuti quando faccio clic su dove.Come rilevare i tasti premuti al clic di AngularJS
ad esempio, con jquery posso farlo accedendo agli argomenti della funzione Click.
Esiste un modo semplice per ottenere tali informazioni su angolare?
Date un'occhiata a questa bella roba per quanto riguarda AngularJS key handling
codice in modo fondamentale per Ctrl, Shift, Alt sarà
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");
};
});
Non c'è modo "automatico" utilizzando JS puri, ma è relativamente semplice per tenere traccia dello stato tasti modificatori in variabili globali. Per esempio.
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);
Se si sta tentando di catturare una combinazione di tasti, come Ctrl-Enter, si può guardare l'oggetto window
Ad esempio, per trovare Ctrl-Enter uso
if(window.event.keyCode == 13 && window.event.ctrlKey == true)
Per l'angolare dovresti usare '$ event' invece di' window.event'. –
In il codice HTML
<button ng-click="doSomething($event)"></button>
Nei tuoi js
$scope.doSomething = function($event)
{
if ($event.altKey){}
if ($event.ctrlKey){}
if ($event.shiftKey){}
}
Molto più semplice di tutte le altre alternative. Funzionava perfettamente quando avevo bisogno di controllare il tasto Ctrl –
Nota: ctrlKey non funzionerà come previsto su mac, in quanto ciò attiva un menu di scelta rapida. Mac usa la chiave di comando per questo. – PMBjornerud
@PMBjornerud come si rileva quindi il tasto comando. puoi pubblicare uno snippet di codice o qualcosa del genere. grazie – harshitgupta
Dal momento che non sono sicuro di cosa ogni browser fornisce, vorrei fare in questo modo:
shiftPressed = event.shiftKey || (event.keyCode === 16);
Su Chorme per esempio non riesco a vedere alcun event.keyCode sul 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
Perfetto, che, funzionando perfettamente, è sufficiente aggiungere $ event. Grazie –