getModifierState() 메서드는 지정한 수정 키(modifier key)가 눌려 있는지 여부에 따라 true 또는 false를 반환합니다. 이 메서드를 활용하면 CapsLock, Shift, Alt 같은 특수 키의 현재 상태를 실시간으로 확인할 수 있어, 비밀번호 입력 시 CapsLock 경고 기능을 구현하는 데 특히 유용합니다.
문법(Syntax)
getModifierState() 메서드의 기본 문법은 다음과 같습니다.
수정 키 이름을 매개변수로 전달하여 호출합니다.
event.getModifierState("modifierKey")
사용 가능한 수정 키(Modifier Keys)
매개변수 "modifierKey"에 사용할 수 있는 값은 다음과 같습니다.
| modifierKey |
|---|
| Alt |
| AltGraph |
| CapsLock |
| Control |
| Meta |
| NumLock |
| ScrollLock |
| Shift |
예제(Example)
다음은 getModifierState() 메서드를 활용한 실전 예제입니다. 비밀번호 입력 필드에서 CapsLock이 켜져 있는지 감지하여 사용자에게 알려주는 기능을 구현했습니다.
<!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>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
CapsLock 키를 켜기 '전' 상태 −
CapsLock 키를 'ON'으로 켠 후 상태 −
CapsLock 키를 'OFF'로 끈 후 상태 −
이처럼 getModifierState() 메서드를 사용하면 키보드 이벤트 발생 시점에 수정 키의 활성화 여부를 손쉽게 판별할 수 있습니다. 특히 로그인 폼이나 회원가입 폼에서 CapsLock 상태를 미리 알려주면 사용자 경험(UX)을 크게 향상시킬 수 있습니다.