JavaScript에서 여러 키를 동시에 눌렀을 때 감지하는 방법

JavaScript에서 keydown 이벤트를 활용하면 사용자가 동시에 누르고 있는 키들을 손쉽게 확인할 수 있습니다. 키보드 입력을 실시간으로 추적하려면 keydown과 keyup 이벤트를 함께 사용하는 것이 효과적입니다.

예제 코드

var log = $('#log')[0],
    keyPressed = [];

$(document.body).keydown(function (evt) {
    var li = keyPressed[evt.keyCode];
    if (!li) {
        li = log.appendChild(document.createElement('li'));
        keyPressed[evt.keyCode] = li;
    }
    $(li).text('Key Down: ' + evt.keyCode);
    $(li).removeClass('key-up');
});

$(document.body).keyup(function (evt) {
    var li = keyPressed[evt.keyCode];
    if (!li) {
        li = log.appendChild(document.createElement('li'));
        keyPressed[evt.keyCode] = li;
    }
    $(li).text('Key Up: ' + evt.keyCode);
    $(li).addClass('key-up');
});

코드 설명

keydown 이벤트 핸들러는 키가 눌리는 순간마다 실행됩니다. 각 키코드(keyCode)별로 새로운 리스트 항목(li)을 생성해 로그 영역에 추가하고, 해당 요소를 keyPressed 객체에 저장해 둡니다. 덕분에 같은 키가 반복해서 눌려도 중복된 요소를 만들지 않고 기존 항목의 텍스트만 갱신할 수 있습니다.

keyup 이벤트 핸들러는 키에서 손을 뗐을 때 실행되며, 'Key Up' 메시지를 표시하고 key-up 클래스를 추가해 시각적으로 상태를 구분합니다.

이 방식으로 여러 키를 동시에 누르면 각 키마다 별도의 목록 항목이 생성되므로, 현재 눌려 있는 모든 키의 상태를 한눈에 파악할 수 있습니다. 참고로 최신 브라우저 환경에서는 호환성이 낮아진 keyCode 대신 event.key 또는 event.code 속성을 사용하는 것이 권장됩니다.