JavaScript에서 화살표 키의 눌림을 감지하려면 onkeydown 이벤트를 사용하면 됩니다.
각 키에는 고유한 키 코드(keyCode)가 할당되어 있습니다. 왼쪽 화살표 키는 37, 위쪽 화살표 키는 38, 오른쪽 화살표 키는 39, 아래쪽 화살표 키는 40입니다.
예제 코드
다음은 전체 소스 코드입니다.
<!DOCTYPE html>
<html lang="en">
<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>
<body>
</body>
<script>
document.onkeydown = function (event) {
switch (event.keyCode) {
case 37:
console.log("Left key is pressed.");
break;
case 38:
console.log("Up key is pressed.");
break;
case 39:
console.log("Right key is pressed.");
break;
case 40:
console.log("Down key is pressed.");
break;
}
};
</script>
</html>실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장한 후, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 “Open with Live Server” 옵션을 선택하면 됩니다.
출력 결과
여기서는 위쪽 화살표 키를 눌렀습니다. 그러면 콘솔에 다음과 같은 결과가 출력됩니다.
참고: 최신 방식으로 개선하기
keyCode 속성은 현재 폐기(deprecated)된 상태이므로, 최신 브라우저 환경에서는 KeyboardEvent.key 값을 사용하는 것이 권장됩니다. 예를 들어 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown' 문자열로 각 방향키를 비교할 수 있으며, 가독성 측면에서도 숫자 코드보다 더 직관적입니다.