HTML DOM KeyboardEvent 위치 속성은 키보드에서 눌린 키의 위치에 해당하는 숫자를 반환합니다.
구문
다음은 구문입니다 -
누른 키의 위치 반환 -
event.location
숫자
여기 숫자 다음과 같이 반환될 수 있습니다. -
숫자 | 설명 |
---|---|
0 | 키보드의 거의 모든 값을 나타냅니다. (키보드 중간 부분의 모든 키, 예:'Q', '\', '스페이스바') |
1 | 왼쪽 키보드의 값을 나타냅니다. (키보드 왼쪽 섹션의 모든 키, 예:'left ctrl', 'left Shift', 'left alt') |
2 | 오른쪽 키보드의 값을 나타냅니다. (키보드의 오른쪽 섹션에 있는 모든 키, 예:'right ctrl', 'right Shift', 'right alt') |
3 | 숫자 키패드의 값을 나타냅니다. (키보드의 숫자 키패드 섹션에 있는 모든 키, 예:'1', '/', '.') |
예시
KeyboardEvent의 예를 살펴보겠습니다. 위치 속성 -
<!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>
출력
이것은 다음과 같은 출력을 생성합니다 -
텍스트 필드에 아무 것도 입력하기 전에 -
'w'를 입력한 후 텍스트 필드에서 -
'+'를 누른 후 숫자 키패드의 텍스트 필드에서 -