JavaScript에서 키 입력을 감지하는 가장 간단한 방법

JavaScript에서 사용자의 키 입력(keypress)을 감지하는 가장 쉬운 방법은 onkeypress 이벤트 핸들러를 사용하는 것입니다.

document.onkeypress

키 입력은 keyCode 속성과 비교하여 판별할 수 있습니다. keyCode 속성은 onkeypress 이벤트를 발생시킨 키의 유니코드(Unicode) 문자 코드를 반환하며, 이 값을 활용해 어떤 키가 눌렸는지 확인할 수 있습니다.

예제 코드

다음은 Enter 키와 그 외의 다른 키 입력을 구분하여 처리하는 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>키 입력 감지 예제</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<script>
    document.onkeypress = function (eventKeyName) {
        eventKeyName = eventKeyName || window.event;
        if(eventKeyName.keyCode == 13){
            console.log('Enter 키를 누르셨습니다');
        } else {
            alert(String.fromCharCode(eventKeyName.keyCode))
        }
    };
</script>
</body>
</html>

실행 방법

위 프로그램을 실행하려면 파일 이름을 “anyName.html(index.html)”로 저장한 뒤, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. 그리고 VS Code 편집기에서 “Open with Live Server” 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.

실행 결과

위 프로그램을 실행하면 다음과 같은 결과가 출력됩니다.

Case 1 − Enter 키(keyCode: 13)를 누르면 콘솔에 아래와 같은 메시지가 출력됩니다.

You have pressed enter key

Case 2 − Enter 키를 제외한 다른 키, 예를 들어 알파벳 g를 누르면 해당 문자가 화면에 표시됩니다.

참고: 최신 JavaScript에서의 권장 사항

keypress 이벤트는 현재 공식적으로 폐기(deprecated)된 상태이며, 최신 브라우저에서는 더 이상 권장되지 않습니다. 실무에서는 keydown 또는 keyup 이벤트와 함께 event.key(예: 'Enter', 'g') 또는 event.code 속성을 사용하는 것이 좋습니다.

document.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') {
        console.log('Enter 키를 누르셨습니다');
    } else {
        console.log('누른 키:', e.key);
    }
});

이 방식은 keyCode의 숫자 값 대신 직관적인 문자열로 키를 판별할 수 있어 가독성과 유지보수성이 훨씬 뛰어납니다.