JavaScript 키보드 이벤트의 ctrlKey 속성이란? 역할과 사용법 완벽 정리

JavaScript ctrlKey 속성이란?

ctrlKey 속성은 키보드 이벤트(keydown, keyup 등)가 발생한 시점에 Ctrl 키가 눌려 있는지 여부를 확인하는 데 사용됩니다. 이 속성은 불리언(Boolean) 값을 반환하며, Ctrl 키가 눌려 있으면 true, 그렇지 않으면 false를 리턴합니다.

예를 들어, 사용자가 단축키 조합(예: Ctrl + C, Ctrl + S)을 입력했는지 감지해야 하는 경우 이 속성을 활용하면 매우 유용합니다.

ctrlKey 속성의 주요 특징

키보드 이벤트 객체(KeyboardEvent)에서 제공되는 읽기 전용(read-only) 속성입니다.
Ctrl 키가 눌린 상태에서 다른 키를 누르면 true를 반환합니다.
Ctrl 키 없이 키를 누르면 false를 반환합니다.
유사한 속성으로 altKey, shiftKey, metaKey 등이 있으며, 각각 Alt, Shift, Meta(Windows 키 또는 Command 키)의 눌림 여부를 확인할 수 있습니다.

ctrlKey 속성 구현 예제

아래 예제는 텍스트 입력창에서 키를 누를 때마다 Ctrl 키의 눌림 여부를 실시간으로 화면에 표시하는 코드입니다.

<!DOCTYPE html>
<html>
   <body>
      <input type = "text" onkeydown = "funcCtrlKey(event)">
      <div id = "res">아무 키나 눌러보세요</div>

      <script>
            function funcCtrlKey(event) {
            var val = document.getElementById("res");

            if (event.ctrlKey) {
               val.innerHTML = "CTRL 키: 눌림";
            } else {
               val.innerHTML = "CTRL 키: 눌리지 않음";
            }
         }
      </script>
   </body>
   
</html>

코드 동작 원리

입력 필드에 onkeydown 이벤트 핸들러가 등록되어 있어, 키를 누르는 순간 funcCtrlKey(event) 함수가 호출됩니다.
함수 내부에서는 이벤트 객체의 event.ctrlKey 값을 확인합니다.
값이 true이면 "CTRL 키: 눌림", false이면 "CTRL 키: 눌리지 않음"이라는 메시지가 결과 영역에 출력됩니다.

직접 코드를 실행하고 입력창에서 일반 키와 Ctrl 키를 함께 눌러 보면서 두 결과의 차이를 확인해 보세요. 이처럼 ctrlKey 속성을 활용하면 복잡한 키보드 단축키 기능도 손쉽게 구현할 수 있습니다.