KeyboardEvent의 charCode 속성은 키보드 이벤트가 발생했을 때 사용자가 누른 문자에 해당하는 유니코드 문자 코드를 숫자 값으로 반환합니다. 예를 들어 소문자 'z'를 누르면 122라는 코드 값이 반환됩니다.
참고: 더 정확하고 안정적인 결과를 얻으려면 key 속성을 사용하는 것이 좋습니다. charCode 속성은 현재 폐기(deprecated)된 상태이며, 최신 웹 표준에서는 권장되지 않습니다.
구문
다음은 charCode 속성의 기본 구문입니다 −
가장 최근에 입력된 문자의 charCode 값을 반환합니다 −
event.charCode
예제
KeyboardEvent charCode 속성의 실제 동작 방식을 예제를 통해 살펴보겠습니다. 아래 예제는 사용자가 빈칸 채우기 문제에 정답 'z'를 입력했는지 charCode 값으로 판별합니다 −
<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent charCode</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-charCode</legend>
<label>Fill in the blanks:
<input type="text" id="textSelect" placeholder="__ for zebra" 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.charCode === 122)
divDisplay.textContent = 'Correct Answer';
else
divDisplay.textContent = 'Try Again, '+textSelect.placeholder;
textSelect.textContent = '';
}
</script>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다 −
텍스트 필드에 아무것도 입력하지 않은 초기 상태 −
텍스트 필드에 오답('z'가 아닌 다른 문자)을 입력한 경우 −
텍스트 필드에 정답 'z'를 입력한 경우 −
동작 원리
위 예제에서 핵심은 getEventData() 함수입니다. 이 함수는 onkeypress 이벤트를 통해 전달받은 이벤트 객체에서 charCode 값을 읽어옵니다. 소문자 'z'의 유니코드 코드는 122이므로, 입력된 문자의 charCode가 122와 일치하면 "Correct Answer(정답)" 메시지를 표시하고, 그렇지 않으면 "Try Again(다시 시도)" 메시지와 함께 힌트를 보여줍니다.
charCode 속성 사용 시 주의사항
- 문자를 생성하지 않는 키(방향키, Shift, Ctrl 등)에 대해서는 0을 반환합니다.
keypress이벤트 자체가 폐기된 상태이므로, 새로운 프로젝트에서는keydown또는keyup이벤트와 함께 key 속성을 사용하는 것이 좋습니다.- 대소문자에 따라 서로 다른 코드 값이 반환됩니다(예: 'z'는 122, 'Z'는 90).