HTML DOM KeyboardEvent location 속성 – 키 입력 위치 확인 방법

HTML DOM KeyboardEvent의 location 속성은 키보드에서 누른 키가 어느 영역에 속하는지를 나타내는 숫자 값을 반환합니다. 이 속성을 활용하면 동일한 문자라도 키보드의 중앙, 왼쪽, 오른쪽, 숫자 패드 중 어디에서 입력되었는지 정확하게 구분할 수 있습니다.

문법(Syntax)

눌린 키의 위치 값을 반환하는 기본 문법은 다음과 같습니다.

event.location

반환 값 정리

location 속성이 반환할 수 있는 숫자 값과 그 의미는 아래 표와 같습니다.

값	설명
0	키보드 중앙 영역에 있는 거의 모든 키를 나타냅니다. (예: 'Q', '\', '스페이스바')
1	키보드 왼쪽 영역의 키를 나타냅니다. (예: '왼쪽 Ctrl', '왼쪽 Shift', '왼쪽 Alt')
2	키보드 오른쪽 영역의 키를 나타냅니다. (예: '오른쪽 Ctrl', '오른쪽 Shift', '오른쪽 Alt')
3	숫자 패드(numpad) 영역의 키를 나타냅니다. (예: '1', '/', '.')

예제

KeyboardEvent의 location 속성을 실제로 활용한 예제를 살펴보겠습니다. 사용자가 입력한 키의 위치에 따라 화면에 다른 메시지가 표시됩니다.

<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent location</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>KeyboardEvent-location</legend>
<label>Fill in the blanks:
<input type="text" id="textSelect" placeholder="type here..." onkeydown="getEventData(event)" autocomplete="off">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var textSelect = document.getElementById("textSelect");
   function getEventData(InputEvent) {
      if(InputEvent.location === 0)
         divDisplay.textContent = 'key Pressed in middle section';
      else if(InputEvent.location === 1)
         divDisplay.textContent = 'key Pressed in left section';
      else if(InputEvent.location === 2)
         divDisplay.textContent = 'key Pressed in right section';
      else
      divDisplay.textContent = 'key Pressed in numpad section';
   }
</script>
</body>
</html>

코드 설명

위 예제에서는 텍스트 입력 필드에 onkeydown 이벤트 핸들러를 연결했습니다. 키를 누를 때마다 getEventData() 함수가 실행되며, event.location 값이 0이면 중앙 영역, 1이면 왼쪽 영역, 2이면 오른쪽 영역, 그 외에는 숫자 패드 영역에서 키가 눌렸다는 메시지를 화면에 출력합니다.

출력 결과

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

텍스트 필드에 아무것도 입력하기 전 −

HTML DOM KeyboardEvent location 속성 – 키 입력 위치 확인 방법

텍스트 필드에 'w'를 입력한 후 −

HTML DOM KeyboardEvent location 속성 – 키 입력 위치 확인 방법

숫자 패드에서 '+' 키를 누른 후 −

HTML DOM KeyboardEvent location 속성 – 키 입력 위치 확인 방법

이처럼 KeyboardEvent.location 속성을 사용하면 물리적으로 동일한 키라도 입력된 위치를 구별할 수 있어, 게임 컨트롤이나 단축키 처리 등 좌우 키 구분이 필요한 상황에서 유용하게 활용할 수 있습니다.