JavaScript에서 눌린 키의 문자를 확인하는 방법

JavaScript에서 사용자가 어떤 문자 키를 눌렀는지 확인하려면 window.event 객체와 keyCode 속성을 함께 사용하면 됩니다. 이번 글에서는 예제 코드와 함께 그 방법을 자세히 살펴보겠습니다.

예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=
1.0">
<title>Document</title>
<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>
</head>
<body>
<form>
<input type="text" onkeypress="return keyPressName(event)" />
</form>
<script>
   function keyPressName(myEventKeyName){
      var pressedKey;
      if(window.event){
         pressedKey = myEventKeyName.keyCode;
      } else if(myEventKeyName.which)
    {
         pressedKey = myEventKeyName.which;
   }
   alert(String.fromCharCode(pressedKey));
}
</script>
</body>
</html>

코드 동작 원리

입력 필드에 onkeypress 이벤트가 등록되어 있어, 사용자가 키를 누를 때마다 keyPressName() 함수가 호출됩니다.
함수 내부에서 window.event 존재 여부에 따라 분기 처리합니다. 지원되는 경우 keyCode 값을 사용하고, 그렇지 않으면 호환성을 위해 which 속성값을 사용합니다.
마지막으로 String.fromCharCode() 메서드를 이용해 숫자 형태의 키 코드를 실제 문자로 변환하여 경고창(alert)으로 출력합니다.

실행 방법

위 프로그램을 실행하려면 파일 이름을 “anyName.html(index.html)”로 저장한 후, 해당 파일을 마우스 오른쪽 버튼으로 클릭합니다. 그런 다음 VS Code 편집기에서 “Open with Live Server(라이브 서버로 열기)” 옵션을 선택하면 됩니다.

실행 결과

위 프로그램을 실행하면 다음과 같은 화면이 나타납니다.

JavaScript에서 눌린 키의 문자를 확인하는 방법

여기서 입력 필드에 문자 g를 누르면 다음과 같은 결과가 출력됩니다.

JavaScript에서 눌린 키의 문자를 확인하는 방법

문자 g가 표시된 후 OK 버튼을 클릭하면 다음과 같은 최종 결과를 얻을 수 있습니다.

JavaScript에서 눌린 키의 문자를 확인하는 방법

참고: 위 방식은 구형 브라우저와의 호환성을 고려한 코드입니다. 최신 브라우저 환경에서는 event.key 속성을 사용하면 별도의 문자 변환 없이 눌린 키의 실제 문자값을 바로 얻을 수 있어 더욱 간편합니다.