HTML DOM TouchEvent shiftKey 속성 – 터치 이벤트에서 Shift 키 상태 확인하기

HTML DOM TouchEvent의 shiftKey 속성은 터치 이벤트(touch event)가 발생한 시점에 Shift 키가 눌려 있었는지 여부를 나타내는 Boolean(불리언) 값을 반환합니다. 이 속성을 활용하면 사용자가 화면을 터치하는 동시에 보조 키를 함께 눌렀는지 감지할 수 있어, 모바일 환경에서 다양한 인터랙션을 구현하는 데 유용합니다.

문법(Syntax)

shiftKey 속성은 다음과 같이 사용하며, true 또는 false 중 하나의 불리언 값을 반환합니다.

touchEvent.shiftKey

반환 값 설명

booleanValue	설명
true	터치 이벤트가 발생했을 때 Shift 키가 눌려 있었음을 의미합니다.
false	터치 이벤트가 발생했을 때 Shift 키가 눌려 있지 않았음을 의미합니다.

참고: 터치 이벤트 예제는 모바일 기기 또는 터치 입력이 가능한 시스템에서 접속한 온라인 HTML 에디터에서 실행했습니다. 이는 2초간 화면을 길게 터치하는 것과 같은 실제 터치 동작을 수행하기 위함입니다.

TouchEvent shiftKey 속성 예제

다음 예제는 폼(form) 요소에 터치 이벤트가 발생했을 때 Shift 키의 눌림 상태를 확인하고, 그 결과에 따라 배경색과 텍스트를 변경하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM TouchEvent shiftKey</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
   legend{
      border-color: #dc3545;
   }
   span {
      display: inline-block;
      width: 40px;
      height: 20px;
      margin: 1px;
      color: #fff;
      border: 3px solid black;
   }
   div span:nth-child(1){
      background-color: #FF8A00;
   }
   div span:nth-child(2){
      background-color: #F44336;
   }
   div span:nth-child(3){
      background-color: #03A9F4;
   }
   div span:nth-child(4){
      background-color: #4CAF50;
   }
</style>
</head>
<body>
   <form id="formSelect" ontouchstart="eventAction(event)">
      <fieldset>
         <legend>HTML-DOM-TouchEvent-shiftKey</legend>
         <label for="textSelect">Background Color Changer</label>
         <div><span>Alt</span><span>Ctrl</span><span>Meta</span><span>Shift</span></div>
         <div id="divDisplay">No HotKey Pressed</div>
    </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var formSelect = document.getElementById("formSelect");
   function eventAction(event) {
      if(event.shiftKey){
         formSelect.style.backgroundColor = '#4CAF50';
         formSelect.style.color = '#FFF'
         divDisplay.textContent = 'Shift Key Pressed';
      }
   }
</script>
</body>
</html>

실행 결과

터치 이벤트 발생 전 −

HTML DOM TouchEvent shiftKey 속성 – 터치 이벤트에서 Shift 키 상태 확인하기

Shift 키를 누른 상태로 터치 이벤트를 발생시킨 후 −

HTML DOM TouchEvent shiftKey 속성 – 터치 이벤트에서 Shift 키 상태 확인하기

위 예제에서 볼 수 있듯이, Shift 키를 누른 채로 폼 영역을 터치하면 ontouchstart 이벤트 핸들러가 실행되고, event.shiftKey 값이 true이므로 폼의 배경색이 초록색(#4CAF50)으로 변경되며 "Shift Key Pressed"라는 메시지가 화면에 표시됩니다. 반대로 Shift 키 없이 터치하면 아무 변화도 일어나지 않습니다.