화살표 키를 눌렀을 때 감지하려면 JavaScript에서 onkeydown을 사용하세요.
버튼에는 키 코드가 있습니다. 아시다시피 왼쪽 화살표 키에는 코드 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 편집기에서 "실시간 서버로 열기" 옵션을 선택합니다.
출력
여기서는 위쪽 화살표 키를 눌렀습니다. 이것은 콘솔에 다음과 같은 출력을 생성합니다 -
