HTML KeyboardEvent which 속성 – 키 입력의 유니코드 문자 코드 확인하기

HTML KeyboardEvent의 which 속성은 HTML 문서에서 발생하는 onkeypress, onkeydown, onkeyup 이벤트를 유발한 키의 유니코드(Unicode) 문자 코드를 반환합니다.

즉, 사용자가 키보드로 어떤 키를 눌렀는지를 숫자 값으로 확인할 수 있어, 키 입력 검증이나 단축키 구현 등에 활용할 수 있습니다.

문법(Syntax)

which 속성의 기본 문법은 다음과 같습니다.

event.which

예제(Example)

아래 예제는 입력 필드에 키를 입력하면 해당 키의 유니코드 문자 코드가 화면에 표시되도록 구현한 것입니다.

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
    }
    input {
        border: 2px solid #fff;
        padding: 8px;
        background: transparent;
        width: 310px;
        border-radius: 20px;
        outline: none;
    }
    ::placeholder {
        color: #000;
    }
    .show {
        font-size: 1.2rem;
        color: #fff;
    }
</style>
<body>
<h1>HTML KeyboardEvent which Property Demo</h1>
<input type="text" placeholder="Enter your message" onkeypress="display(event)">
<div class="show">
<p>입력한 메시지의 유니코드 문자 코드:</p>
</div>
<script>
    function display(event) {
        document.querySelector(".show").innerHTML += "<p>" + event.which + "/p>";
    }
</script>
</body>
</html>

출력 결과(Output)

프로그램을 실행하면 아래와 같이 그라데이션 배경과 함께 텍스트 입력 필드가 나타납니다.

HTML KeyboardEvent which 속성 – 키 입력의 유니코드 문자 코드 확인하기

이제 입력 필드에 원하는 메시지를 타이핑해 보세요. 그러면 입력한 각 글자에 대응하는 유니코드 문자 코드가 화면 하단에 차례대로 표시됩니다.

HTML KeyboardEvent which 속성 – 키 입력의 유니코드 문자 코드 확인하기

참고 사항

which 속성은 과거 널리 사용되었지만, 현재는 표준에서 지원 중단(deprecated)된 상태입니다. 최신 브라우저 환경에서는 대신 KeyboardEvent.key(눌린 키의 이름 값) 또는 KeyboardEvent.code(물리적 키 코드) 속성을 사용하는 것이 권장됩니다. 다만 기존 코드 호환성을 위해 여전히 많은 브라우저에서 동작하고 있습니다.