반응형
AngularJS 클릭 시 눌린 키를 감지하는 방법
angularjs를 웹 응용 프로그램에서 사용하고 있는데, 이 응용 프로그램은 를 어떻게 탐지할 수 있는지 또는 어딘가를 클릭할 때 눌러집니다.
예를 들어, jQuery를 사용하면 Click 함수 인수에 액세스하여 이를 수행할 수 있습니다.
각도에 관한 정보를 얻을 수 있는 방법이 있습니까?
html에
<button ng-click="doSomething($event)"></button>
너의 js에서
$scope.doSomething = function($event)
{
if ($event.altKey){}
if ($event.ctrlKey){}
if ($event.shiftKey){}
}
Angular에 관한 이 아름다운 것을 보세요.JS키 핸들링
그래서 Ctrl, shift, alt의 키코드는
Ctrl - 17
Alt - 18
시프트 - 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>
대본
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");
};
});
순수 JS를 사용하는 "자동화된" 방법은 없지만, 전역 변수에서 수정자 키의 상태를 추적하는 것은 비교적 간단합니다.예.
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);
Ctrl-Enter와 같은 키 조합을 캡처하려는 경우 창 개체를 볼 수 있습니다.
예를 들어 Ctrl-Enter use를 찾는 방법
if(window.event.keyCode == 13 && window.event.ctrlKey == true)
각 브라우저가 제공하는 것을 잘 모르므로 다음과 같은 방식으로 수행합니다.
shiftPressed = event.shiftKey || (event.keyCode === 16);
예를 들어 Chorme에서는 어떤 이벤트도 볼 수 없습니다.클릭 이벤트의 keyCode:
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
언급URL : https://stackoverflow.com/questions/23651954/how-to-detect-pressed-keys-on-the-click-of-angularjs
반응형
'programing' 카테고리의 다른 글
| 마스터와 슬레이브(MySQL)에서 테이블 인덱스를 다르게 할 수 있습니까? (0) | 2023.09.24 |
|---|---|
| c 프로그램에서 더블 프리 또는 손상(! prev) 오류가 발생 (0) | 2023.09.24 |
| 꿀꺽꿀꺽 + 웹팩? 아니면 JUST 웹팩? (0) | 2023.09.24 |
| jquery를 사용하여 양식을 게시하려면 기존 html 양식을 어떻게 재정의합니까? (0) | 2023.09.19 |
| MySQL에서 구별되는 것의 반대 (0) | 2023.09.19 |