Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript altKey 속성 완벽 가이드 – 키보드 이벤트에서 ALT 키 눌림 여부 확인하기

JavaScript의 altKey 속성은 키보드 이벤트가 발생한 시점에 사용자가 ALT 키를 누르고 있었는지 여부를 알려주는 불리언(Boolean) 속성입니다.

키보드 이벤트(예: keydown, keyup, keypress)가 트리거될 때 ALT 키가 눌려 있었다면 true, 그렇지 않다면 false를 반환합니다. 이 속성을 활용하면 단축키 조합을 구현하거나, 특정 키 조합에 따라 서로 다른 동작을 처리하는 등의 기능을 쉽게 만들 수 있습니다.

altKey 속성의 주요 특징

  • 반환 값: ALT 키가 눌린 상태면 true, 아니면 false
  • 적용 이벤트: keydown, keyup, keypress 등 모든 키보드 이벤트
  • 활용 예시: Alt + 다른 키 조합으로 실행되는 웹 애플리케이션 단축키 구현

예제 코드

아래 예제는 입력 필드에서 키를 누를 때마다 altKey 속성을 확인하여 ALT 키의 눌림 여부를 화면에 표시합니다. 코드를 직접 실행해 보면서 동작 방식을 익혀보세요.

<!DOCTYPE html>
<html>
   <body>
      <input type = "text" onkeydown = "funcAltKey(event)">
      <div id = "res"> Press any key </div>
      <script>
         function funcAltKey(event) {
            var val = document.getElementById("res");
           
            if (event.altKey) {
               val.innerHTML = "ALT key: Pressed";
            } else {
               val.innerHTML = "ALT key: NOT Pressed";
            }
         }
      </script>
   </body>
</html>

코드 설명

  1. 텍스트 입력 필드에 onkeydown 이벤트 핸들러로 funcAltKey(event) 함수가 연결되어 있습니다.
  2. 사용자가 키를 누르면 이벤트 객체가 함수로 전달되고, event.altKey 값이 조건문으로 검사됩니다.
  3. ALT 키가 눌려 있으면 결과 영역(#res)에 "ALT key: Pressed"가 표시되고, 그렇지 않으면 "ALT key: NOT Pressed"가 출력됩니다.

함께 알아두면 좋은 유사 속성

altKey와 마찬가지로 키보드 이벤트 객체에는 다른 보조 키의 눌림 상태를 확인하는 속성들이 있습니다.

  • ctrlKey: Ctrl 키 눌림 여부
  • shiftKey: Shift 키 눌림 여부
  • metaKey: Windows 키 또는 Mac의 Command 키 눌림 여부

이 속성들을 조합하면 Ctrl + Alt + S 같은 복합 단축키도 손쉽게 감지할 수 있으므로, 키보드 인터랙션이 많은 웹 애플리케이션 개발 시 적극적으로 활용해 보세요.