Tôi đang sử dụng angularjs trên một ứng dụng web mà tôi cần phải tìm ra làm thế nào tôi có thể phát hiện là các phím như ctrl, shift hoặc alt được nhấn khi tôi bấm vào một số nơi. Ví dụ:Làm thế nào để phát hiện các phím bấm khi bấm vào AngularJS
ví dụ, với jquery tôi có thể làm điều đó bằng cách truy cập các đối số hàm Nhấp chuột.
Có cách nào để lấy thông tin đó về góc cạnh không?
Hãy xem Stuff xinh đẹp này liên quan đến AngularJS key handling
đang Vậy chìa khóa cho Ctrl, Shift, Alt sẽ
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");
};
});
Không có "tự động" cách sử dụng JS thuần túy, nhưng nó tương đối đơn giản để theo dõi trạng thái các phím modifier trong các biến toàn cầu. Ví dụ.
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);
Nếu bạn đang cố gắng để nắm bắt một tổ hợp phím như Ctrl-Enter, bạn có thể nhìn vào các đối tượng cửa sổ
Ví dụ để tìm tổ hợp phím Ctrl-Enter sử dụng
if(window.event.keyCode == 13 && window.event.ctrlKey == true)
Đối với góc cạnh, bạn nên sử dụng '$ event' thay vì' window.event'. –
Trong html của bạn
<button ng-click="doSomething($event)"></button>
Trong js của bạn
$scope.doSomething = function($event)
{
if ($event.altKey){}
if ($event.ctrlKey){}
if ($event.shiftKey){}
}
Đơn giản hơn nhiều so với tất cả các lựa chọn thay thế khác. Làm việc hoàn hảo khi tôi cần kiểm tra phím Ctrl –
Lưu ý: ctrlKey sẽ không hoạt động như mong đợi trên mac vì điều này sẽ kích hoạt menu ngữ cảnh. Mac sử dụng phím lệnh cho điều này. – PMBjornerud
@PMBjornerud làm thế nào để bạn phát hiện ra phím lệnh sau đó. bạn có thể đăng đoạn mã hay gì đó không. thanks – harshitgupta
Kể từ khi tôi không chắc chắn những gì mỗi trình duyệt cung cấp, tôi sẽ làm điều đó theo cách này:
shiftPressed = event.shiftKey || (event.keyCode === 16);
On chorme ví dụ tôi không thể nhìn thấy bất kỳ event.keyCode về sự kiện 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
Tuyệt vời, nó hoạt động hoàn hảo, chỉ cần thêm $ event. Cảm ơn –