JavaScript를 사용하면 입력 필드에서 Caps Lock이 켜져 있는지 손쉽게 감지할 수 있습니다. 이 기능은 로그인 폼이나 비밀번호 입력란에서 대소문자 오류를 방지하기 위해 사용자에게 실시간으로 경고 메시지를 보여줄 때 특히 유용합니다.
Caps Lock 감지 원리
키보드 이벤트 객체에서 제공하는 getModifierState() 메서드를 활용합니다. 이 메서드는 keydown 또는 keyup 이벤트가 발생한 시점에 "CapsLock", "Shift", "Alt" 같은 수정 키(modifier key)의 활성화 상태를 불리언 값(true/false)으로 반환합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
#textBox {
display: none;
color: red;
}
</style>
<body>
<h1>Detecting Caps Lock Example</h1>
<input class="inputfield" value="Some textBox.." />
<h2>Press caps lock in the above input field to check warning</h2>
<h2 class="textBox">WARNING! Caps lock is ON.</h2>
<script>
var input = document.querySelector(".inputfield");
var textBox = document.querySelector(".textBox");
input.addEventListener("keyup", event => {
if (event.getModifierState("CapsLock")) {
textBox.style.display = "block";
} else {
textBox.style.display = "none";
}
});
</script>
</body>
</html>
코드 설명
document.querySelector()를 사용해 입력 필드와 경고 메시지 요소를 각각 선택합니다.- 입력 필드에
keyup이벤트 리스너를 등록하여 사용자가 키를 눌렀다 뗄 때마다 Caps Lock 상태를 확인합니다. event.getModifierState("CapsLock")이true를 반환하면 경고 메시지를 화면에 표시(display: block)하고,false이면 다시 숨깁니다(display: none).- 기본적으로 경고 메시지는 CSS의
display: none으로 숨겨져 있다가 필요한 순간에만 나타나도록 처리되어 있습니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면을 볼 수 있습니다.
Caps Lock이 켜진 상태에서 입력 필드에 무언가를 입력하면 아래와 같이 빨간색 경고 메시지가 즉시 나타납니다.
이처럼 getModifierState() 메서드만 활용하면 별도의 라이브러리 없이도 간단하게 Caps Lock 상태를 감지하고, 사용자 경험을 개선하는 안내 메시지를 구현할 수 있습니다.