JavaScript에서 현재 키가 다운되었는지 감지하는 방법이 있습니까?
"keydown"이벤트에 대해 알고 있지만 그게 필요한 것은 아닙니다. 키를 누른 후 얼마 지나지 않아 여전히 눌려 있는지 감지하고 싶습니다.
추신 : 가장 큰 문제는 일정 시간이 지나면 키가 반복되기 시작하여 악마처럼 keydown 및 keyup 이벤트가 발생한다는 것입니다. 바라건대 단순한 isKeyDown (key) 함수가 있지만 그렇지 않다면이 문제를 극복하고 해결해야합니다.
답변:
JavaScript에서 현재 키가 다운되었는지 감지하는 방법이 있습니까?
아니. 유일한 가능성은 각각 모니터링 keyup하고 keydown그리고 기억.
일정 시간이 지나면 키가 반복되기 시작하여 악마처럼 keydown 및 keyup 이벤트를 발생시킵니다.
안됩니다. 당신은 확실히 keypress반복 될 것이고 , 많은 브라우저에서 당신은 또한 반복 될 것입니다 keydown. 그러나 keyup반복된다면 그것은 버그입니다.
불행히도 완전히 들어 본 적이없는 버그는 아닙니다. Linux, Chromium 및 Firefox (Ubuntu와 같은 인기있는 배포판에있는 GTK +에서 실행되는 경우)에서 둘 다 보유 키에 대해 반복되는 keyup-keypress-keydown 시퀀스를 생성합니다. 키를 정말 빨리 두드리는 사람과 구별 할 수 없습니다.
keyup이벤트.
사용하는 것 외에도 keyup및 keydown핵심 다운 될 때 추적하고 백업하는 리스너가 있는 특정 키가 아래 경우에 당신에게 일부 속성은 실제로.
window.onmousemove = function (e) {
if (!e) e = window.event;
if (e.shiftKey) {/*shift is down*/}
if (e.altKey) {/*alt is down*/}
if (e.ctrlKey) {/*ctrl is down*/}
if (e.metaKey) {/*cmd is down*/}
}
이것은에서 그와 같은 모든 브라우저 생성 된 이벤트 객체에서 사용할 수 있습니다 keydown, keyup그리고 keypress당신이 사용 MouseMove 이벤트에 필요가 없습니다.
나는 내 자신의 이벤트 객체를 생성 시도 document.createEvent('KeyboardEvent')하고 document.createEvent('KeyboardEvent')과를 찾는 e.shiftKey등,하지만 난 운이 없었다.
Mac에서 Chrome 17을 사용하고 있습니다.
내 솔루션 :
var pressedKeys = {};
window.onkeyup = function(e) { pressedKeys[e.keyCode] = false; }
window.onkeydown = function(e) { pressedKeys[e.keyCode] = true; }
이제 스크립트의 다른 곳에서 키를 눌렀는지 확인할 수 있습니다.
pressedKeys["code of the key"]
사실이면 키를 누릅니다.
isKeyDown 함수와 같은 것이 있다고 생각하지 않지만 직접 작성할 수 있습니다.
기본적으로 길이가 모니터링하려는 키의 수인 배열을 만듭니다. 그런 다음 문서 / 페이지 / 컨트롤 keyUp 및 keyDown 이벤트를 사용하여 해당 키의 상태로 배열을 업데이트합니다.
그런 다음 특정 키가 눌려 있는지 확인하고 bool을 반환하는 함수를 작성합니다.
var keyEnum = { W_Key:0, A_Key:1, S_Key:2, D_Key:3 };
var keyArray = new Array(4);
function onKeyDown()
{
// Detect which key was pressed
if( key == 'w' )
keyArray[keyEnum.W_Key] = true;
// Repeat for each key you care about...
}
function onKeyUp()
{
// Detect which key was released
if( key == 'w' )
keyArray[keyEnum.W_Key] = false;
// Repeat for each key you care about...
}
function isKeyDown(key)
{
return keyArray[key];
}
그것은 당신이 원하는 것을 성취 할 것입니다.
이미 브라우저에 내장 된 것이 있는지 확인하기 위해 여기까지 왔지만없는 것 같습니다. 이것은 내 솔루션입니다 (Robert의 대답과 매우 유사).
"use strict";
const is_key_down = (() => {
const state = {};
window.addEventListener('keyup', (e) => state[e.key] = false);
window.addEventListener('keydown', (e) => state[e.key] = true);
return (key) => state.hasOwnProperty(key) && state[key] || false;
})();
그런 다음으로 키를 눌렀는지 확인할 수 있습니다 is_key_down('ArrowLeft').
다른 사람들은 전에 이런 종류의 질문을 한 적이 있습니다 (지금 당장은 명백한 속임수를 보지 못했지만).
대답은 keydown이벤트 (및 그 쌍둥이 keyup)가 여러분이 얻는 모든 정보라는 것입니다. 반복은 운영 체제에 매우 견고하게 연결되어 있으며 응용 프로그램은 BIOS에서 키의 실제 상태를 쿼리 할 기회를 많이 얻지 못합니다.
이 작업을 수행해야하는 경우 수행 할 수있는 작업은 키를 프로그래밍 방식으로 디 바운스하는 것입니다. 기본적으로, 당신은 평가할 수 keydown와 keyup자신을하지만 무시 keyup이 지난 후 너무 빨리 일어나는 경우 이벤트를 keydown... 또는 본질적으로, 당신은 당신의 응답 지연한다 keyup확실히 또 다른이 아니다으로 긴만큼 keydown의 0.25 초 같은과 함께 다음과 같은 이벤트 keyup.
여기에는 타이머 활동을 사용하고 이전 이벤트에 대한 밀리 초 시간을 기록하는 것이 포함됩니다. 매우 매력적인 솔루션이라고는 말할 수 없지만 ...
/*
Tracks what keys are currently down on the keyboard
*/
function keyboard_module(onUpdate){
var kb = {};
var unicode_mapping = {};
document.onkeydown = function(e){
var unicode=e.charCode? e.charCode : e.keyCode
var key = getKey(unicode);
kb[key] = true;
if(onUpdate){
onUpdate(kb);
}
}
document.onkeyup = function(e){
var unicode=e.charCode? e.charCode : e.keyCode
var key = getKey(unicode);
delete kb[key];
if(onUpdate){
onUpdate(kb);
}
}
function getKey(unicode){
if(unicode_mapping[unicode]){
var key = unicode_mapping[unicode];
}else{
var key= unicode_mapping[unicode] = String.fromCharCode(unicode);
}
return key;
}
return kb;
}
function testing(kb){
console.log('These are the down keys', kb);
}
var keyboard = keyboard_module(testing);
....
//somewhere else in the code
if(keyboard['K']){/*do something special */}
다음 코드는 내가 사용중인 코드입니다.
var altKeyDownCount = 0;
window.onkeydown = function (e) {
if (!e) e = window.event;
if (e.altKey) {
altKeyDownCount++;
if (30 < altKeyDownCount) {
$('.key').removeClass('hidden');
altKeyDownCount = 0;
}
return false;
}
}
window.onkeyup = function (e) {
if (!e) e = window.event;
altKeyDownCount = 0;
$('.key').addClass('hidden');
}
사용자가 Alt 키를 잠시 (약 2 초) 누르고 있으면 레이블 그룹 (class = 'key hidden')이 나타납니다. Alt 키를 놓으면 레이블이 사라집니다. jQuery와 Bootstrap이 모두 사용됩니다.
이것은 매우 오래된 질문이라는 것을 알고 있지만 DOM API를 사용할 때 키보드 이벤트 핸들러의 불일치 발생을 효과적으로 "패치"하는 매우 가벼운 (~ .5Kb) JavaScript 라이브러리가 있습니다.
라이브러리는 Keydrown 입니다.
다음은 리스너를 설정할 키를 변경하여 내 목적에 잘 맞는 작동 코드 샘플입니다.
kd.P.down(function () {
console.log('The "P" key is being held down!');
});
kd.P.up(function () {
console.clear();
});
// This update loop is the heartbeat of Keydrown
kd.run(function () {
kd.tick();
});
내가 작성중인 Red Light Green Light 게임에서 적절한 일시 중지 애니메이션을 위해 Keydrown을 클라이언트 측 JavaScript에 통합했습니다. 여기 에서 전체 게임을 볼 수 있습니다 . (참고 : 나중에이 글을 읽는다면 게임은 코드가 완전하고 플레이 가능해야합니다. :-D!)
이게 도움이 되길 바란다.
위의 답변을 스캔했으며 제안 keydown/ keyup접근법은 특별한 상황에서만 작동합니다. 사용자가 Alt-Tab을 사용하지 않거나 키 제스처를 사용하여 새 브라우저 창 또는 탭을 열면 a keydown가 등록됩니다.이 시점에서 키가 웹 앱이 모니터링하는 항목인지 알 수 없기 때문에 괜찮습니다. , 또는 표준 브라우저 또는 OS 바로 가기입니다. 브라우저 페이지로 돌아 오면 키가 그동안 릴리스되었지만 여전히 키가 유지되었다고 생각할 것입니다. 또는 사용자가 마우스로 다른 탭이나 응용 프로그램으로 전환하는 동안 일부 키는 그대로 유지 된 다음 페이지 외부에서 해제됩니다.
뒤로 탭할 때 적어도 하나의 마우스 상호 작용이 예상된다는 가정하에 수정 자 키 Shift등을 모니터링 할 수 있습니다 mousemove.
다른 모든 키 대부분 (수정 제외 Tab, Delete하지만 포함 Space, Enter), 모니터링 keypress대부분의 응용 프로그램을 위해 일 것이다 - 주요 화재를 계속 누르고. 하지만 주기적으로 실행되기 때문에 키를 재설정하는 데 약간의 지연이 있습니다 keypress. 기본적으로 keypress계속 실행되지 않으면 대부분의 키를 배제 할 수 있습니다. 이것은 수정 자와 결합하여 매우 밀폐되어 있지만 Tab및으로 무엇을할지 탐구하지 않았습니다 Backspace.
이 DOM 약점을 추상화하는 라이브러리가 있거나 DOM 표준 변경이 다소 오래된 질문이기 때문에 처리 할 수있는 라이브러리가 있다고 확신합니다.
이것은 Firefox와 Chrome에서 작동합니다.
Enter파일을 보거나 특수 온라인 편집기에서 편집하기 위해 특수 html 파일을 로컬로 열어야했습니다 ( Windows의 파일 탐색기에서 파일을 선택할 때 누름 ).
그래서 나는 키를 누른 상태에서 Ctrl키 를 누른 상태에서이 두 옵션을 구별하고 싶었습니다 Enter.
여기의 모든 답변에서 이해했듯이 이것은 실제로 가능하지 않은 것처럼 보이지만 여기에 저에게 허용되는 방식 으로이 행동을 모방하는 방법이 있습니다.
작동 방식은 다음과 같습니다.
Ctrl파일을 열 때 -key 를 누르고 있으면 자바 스크립트 코드에서 keydown 이벤트가 발생하지 않습니다. 그러나 keyup 이벤트가 발생합니다 (마지막으로 Ctrl-key를 놓을 때 ). 코드는 그것을 포착합니다.
이 코드는 키 이벤트 (키업 및 키 다운 모두)가 발생하는 즉시 해제합니다. 따라서 Ctrl파일이 열린 후-키 를 누르면 아무 일도 일어나지 않습니다.
window.onkeyup = up;
window.onkeydown = down;
function up(e) {
if (e.key === 'F5') return; // if you want this to work also on reload with F5.
window.onkeyup = null;
window.onkeyup = null;
if (e.key === 'Control') {
alert('Control key was released. You must have held it down while opening the file, so we will now load the file into the editor.');
}
}
function down() {
window.onkeyup = null;
window.onkeyup = null;
}