developer tip

키가 다운되었는지 확인 하시겠습니까?

optionbox 2020. 10. 4. 10:55
반응형

키가 다운되었는지 확인 하시겠습니까?


JavaScript에서 현재 키가 다운되었는지 감지하는 방법이 있습니까?

"keydown"이벤트에 대해 알고 있지만 그게 필요한 것은 아닙니다. 키를 누른 후 얼마 동안 계속 눌러져 있는지 감지 할 수 있기를 원합니다.

추신 : 가장 큰 문제는 일정 시간이 지나면 키가 반복되기 시작하여 악마처럼 keydown 및 keyup 이벤트가 발생한다는 것입니다. 바라건대 단순한 isKeyDown (key) 함수가 있지만 그렇지 않다면이 문제를 극복하고 해결해야합니다.


JavaScript에서 현재 키가 다운되었는지 감지하는 방법이 있습니까?

아니. 유일한 가능성은 각각 모니터링 keyup하고 keydown그리고 기억.

일정 시간이 지나면 키가 반복되기 시작하여 악마처럼 keydown 및 keyup 이벤트를 발생시킵니다.

안됩니다. 당신은 확실히 keypress반복 될 것이고 , 많은 브라우저에서 당신은 또한 반복 될 것입니다 keydown. 그러나 keyup반복된다면 그것은 버그입니다.

불행히도 완전히 들어 본 적이없는 버그는 아닙니다. Linux, Chromium 및 Firefox (Ubuntu와 같은 인기있는 배포판에있는 GTK +에서 실행되는 경우)에서 둘 다 보유 키에 대해 반복되는 keyup-keypress-keydown 시퀀스를 생성합니다. 키를 정말 빨리 두드리는 사람과 구별 할 수 없습니다.


사용하는 것 외에도 keyupkeydown핵심 다운 될 때 추적하고 백업하는 리스너가 있는 특정 키가 아래 경우에 당신에게 일부 속성은 실제로.

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 keys = {};
window.onkeyup = function(e) { keys[e.keyCode] = false; }
window.onkeydown = function(e) { keys[e.keyCode] = true; }

이제 스크립트의 다른 곳에서 키를 눌렀는지 확인할 수 있습니다.

keys["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];
}

그것은 당신이 원하는 것을 성취해야합니다.


다른 사람들은 전에 이런 종류의 질문을 한 적이 있습니다 (지금 당장은 명백한 속임수를 보지 못했지만).

대답은 keydown이벤트 (및 그 쌍둥이 keyup)가 여러분이 얻는 모든 정보라는 것입니다. 반복은 운영 체제에 매우 견고하게 연결되어 있으며 응용 프로그램은 BIOS에서 키의 실제 상태를 쿼리 할 기회를 많이 얻지 못합니다.

이 작업을 수행해야하는 경우 수행 할 수있는 작업은 키를 프로그래밍 방식으로 디 바운스하는 것입니다. 기본적으로, 당신은 평가할 수 keydownkeyup자신을하지만 무시 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');
}

When the user keeps holding down the Alt key for some time (about 2 seconds), a group of labels (class='key hidden') appears. When the Alt key is released, the labels disappear. jQuery and Bootstrap are both used.


Ended up here to check if there was something builtin to the browser already, but it seems there isn't. This is my solution (very similar to Robert's answer):

"use strict";

let is_key_down = (() => {
    let 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;
})();

You can then check if a key is pressed with is_key_down('ArrowLeft').


Look at this answer, and use onkeyup and onkeydown. Here is more specific info about those events.


I know this is very old question, however there is a very lightweight (~.5Kb) JavaScript library that effectively "patches" the inconsistent firing of keyboard event handlers when using the DOM API.

The library is Keydrown.

Here's the operative code sample that has worked well for my purposes by just changing the key on which to set the listener:

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();
});

I've incorporated Keydrown into my client-side JavaScript for a proper pause animation in a Red Light Green Light game I'm writing. You can view the entire game here. (Note: If you're reading this in the future, the game should be code complete and playable :-D!)

I hope this helps.


I scanned the above answers and the proposed keydown/keyup approach works only under special circumstances. If the user alt-tabs away, or uses a key gesture to open a new browser window or tab, then a keydown will be registered, which is fine, because at that point it's impossible to tell if the key is something the web app is monitoring, or is a standard browser or OS shortcut. Coming back to the browser page, it'll still think the key is held, though it was released in the meantime. Or some key is simply kept held, while the user is switching to another tab or application with the mouse, then released outside our page.

Modifier keys (Shift etc.) can be monitored via mousemove etc. assuming that there is at least one mouse interaction expected when tabbing back, which is frequently the case.

For most all other keys (except modifiers, Tab, Delete, but including Space, Enter), monitoring keypress would work for most applications - a key held down will continue to fire. There's some latency in resetting the key though, due to the periodicity of keypress firing. Basically, if keypress doesn't keep firing, then it's possible to rule out most of the keys. This, combined with the modifiers is pretty airtight, though I haven't explored what to do with Tab and Backspace.

I'm sure there's some library out there that abstracts over this DOM weakness, or maybe some DOM standard change took care of it, since it's a rather old question.


$('#mytextbox').keydown(function (e) {
            if (e.keyCode == 13) {
                if (e.altKey) {
                    alert("alt is pressed");
                }
            }
 });

if you press alt + enter, you will see the alert.

참고URL : https://stackoverflow.com/questions/1828613/check-if-a-key-is-down

반응형