getModifierState() 메소드는 제공된 수정 키가 눌렸는지 여부에 따라 true/false를 반환합니다.
구문
다음은 구문입니다 -
매개변수를 수정자 키로 사용하여 getModifierState() 호출
event.getModifierState(“modifierKey”)
수정자 키
여기 "modifierKey" 다음과 같을 수 있습니다 -
modifierKey |
---|
Alt |
대체 그래프 |
CapsLock |
제어 |
메타 |
NumLock |
ScrollLock |
시프트 |
예시
getModifierState()의 예를 살펴보겠습니다. 방법 -
<!DOCTYPE html> <html> <head> <title>KeyboardEvent getModifierState()</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 getModifierState( )</legend> <label>Password: <input type="password" id="textSelect" onkeydown="getEventState(event)" autocomplete="off"> </label> <div id="divDisplay"></div> </fieldset> </form> <script> window.addEventListener( 'keydown', function( event ) { console.log( 'CapsLock', event.getModifierState("CapsLock") ); }); var divDisplay = document.getElementById("divDisplay"); var textSelect = document.getElementById("textSelect"); divDisplay.textContent = 'Press CapsLock key while typing'; function getEventState(InputEvent) { if(InputEvent.getModifierState("CapsLock")) divDisplay.textContent = 'CapsLock is turned on. Beware!'; else divDisplay.textContent = 'CapsLock is turned off.'; } </script> </body> </html>
출력
이것은 다음과 같은 출력을 생성합니다 -
CapsLock 키를 '켜기'로 설정하기 전에 -
CapsLock 키를 '켜기'로 설정한 후 -
CapsLock 키를 '꺼짐'으로 설정한 후 -