웹 애플리케이션을 개발하다 보면 사용자가 ESC(Escape) 키를 눌렀을 때 특정 동작을 수행해야 하는 경우가 자주 있습니다. 예를 들어 모달 창이나 팝업을 닫는 기능이 대표적입니다.
JavaScript에서는 각 키마다 고유한 키코드(keyCode)가 할당되어 있으며, ESC 키의 키코드는 27입니다. 따라서 키코드 27을 조건으로 검사하면 ESC 키 입력을 손쉽게 처리할 수 있습니다.
예제 코드
다음은 jQuery를 활용해 문서 전체에 keydown 이벤트를 바인딩하고, 눌린 키가 ESC인지 판별하는 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
</body>
<script>
$(document).keydown(function (eventValue) {
if (eventValue.keyCode == 27) {
console.log("ESC 키가 눌렸습니다....");
}
else {
console.log("다른 키가 눌렸습니다....")
}
});
</script>
</html>프로그램 실행 방법
위 프로그램을 실행하려면 파일 이름을 "anyName.html"(index.html)로 저장합니다. 그다음 VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server" 옵션을 선택하면 브라우저에서 바로 확인할 수 있습니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
먼저 ESC 키가 아닌 다른 키를 눌러 보겠습니다.
출력
콘솔에 다음과 같은 출력 결과가 표시됩니다.
이번에는 실제로 ESC 키를 눌러 보겠습니다. 콘솔 출력 내용이 아래와 같이 변경됩니다.
출력
참고: 최신 방식(event.key) 활용하기
keyCode 속성은 현재 표준에서 지원 중단(deprecated)된 상태이므로, 최신 브라우저 환경에서는 event.key 값을 비교하는 방식을 사용하는 것이 좋습니다. ESC 키의 경우 event.key 값은 "Escape"입니다.
document.addEventListener('keydown', function (event) {
if (event.key === 'Escape') {
console.log('ESC 키가 눌렸습니다.');
}
});이처럼 키코드 27 또는 event.key === 'Escape' 조건을 활용하면 팝업 창 닫기 등 다양한 상황에서 ESC 키 입력을 안정적으로 처리할 수 있습니다.