KeyboardEvent 객체의 keyCode 속성은 키보드 이벤트가 발생했을 때 사용자가 누른 키에 해당하는 유니코드(Unicode) 문자 코드를 숫자 값으로 반환합니다. 예를 들어, 영문 소문자 'm'을 누르면 keyCode 값으로 109가 반환됩니다.
이 속성은 주로 onkeypress, onkeydown, onkeyup과 같은 키보드 이벤트 핸들러 내에서 활용되며, 입력된 키를 판별하여 특정 로직을 실행하는 데 사용됩니다.
주의 사항
keyCode 속성은 오래된 규격(Deprecated)이므로, 더 정확하고 일관된 결과를 얻으려면 최신 표준인 key 속성을 사용하는 것이 권장됩니다. key 속성은 브라우저와 운영체제에 관계없이 'm', 'Enter', 'ArrowUp'처럼 실제 키 이름을 문자열로 반환하기 때문에 코드의 가독성과 호환성이 크게 향상됩니다.
문법(Syntax)
마지막으로 입력된 키의 keyCode 값을 반환하는 기본 문법은 다음과 같습니다.
event.keyCode
예제(Example)
아래 예제는 KeyboardEvent의 keyCode 속성을 활용해 사용자가 입력한 키를 검사하는 간단한 퀴즈 프로그램입니다. 빈칸에 'Mango'의 첫 글자 'm'을 입력하면 정답 여부를 화면에 표시합니다.
<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent keyCode</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>KeyboardEvent-keyCode</legend>
<label>빈칸을 채워주세요:
<input type="text" id="textSelect" placeholder="__ for Mango" onkeypress="getEventData(event)" autocomplete="off">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
function getEventData(InputEvent) {
if(InputEvent.keyCode === 109)
divDisplay.textContent = '정답입니다!';
else
divDisplay.textContent = '다시 시도하세요, '+textSelect.placeholder;
textSelect.textContent = '';
}
</script>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
1. 텍스트 필드에 아무것도 입력하지 않은 경우
페이지가 로드되면 입력란과 안내 문구만 표시되고, 결과 영역은 비어 있습니다.
2. 오답을 입력한 경우
'm'이 아닌 다른 키를 누르면 "다시 시도하세요, __ for Mango"라는 메시지가 화면에 나타납니다.
3. 정답을 입력한 경우
키코드가 109('m')인 키를 누르면 "정답입니다!"라는 메시지가 표시됩니다.
정리
keyCode 속성은 눌린 키의 유니코드 값을 숫자로 반환하는 간편한 방법이지만, 현재는 폐기 예정(Deprecated) 상태입니다. 새로운 프로젝트에서는 대소문자 구분, 특수 키 처리 등이 더 명확한 event.key 속성 사용을 권장합니다. 다만 기존 레거시 코드를 유지보수할 때는 keyCode의 동작 방식을 이해하고 있는 것이 여전히 유용합니다.