네이버 같은 웹사이트에 로그인할 때, 특히 비밀번호를 입력할 때 CapsLock이 켜져있다는 알림을 받을 때가 있는데요.

키를 입력할 때 Caps Lock 버튼이 눌렸는지 안눌렸는지, Caps Lock의 활성화 상태를 확인하는 방법에 대해서 알아보겠습니다.

getModifierState()로 CapsLock 상태 확인

키를 입력할 때 CapsLock의 활성화/비활성화 상태를 확인하는 예제입니다.

HTML

텍스트 입력 박스가 있고, 아래에 Caps Lock의 상태를 출력하는 텍스트가 있습니다.

<input type="text" id="capsLockInput" placeholder="텍스트를 입력하세요...">

<p id="capsLockStatus">Caps Lock 상태: ??</p>

Javascript

input에 keyup 이벤트 리스너를 등록하여, 텍스트를 입력할 때 이벤트를 받도록 하였습니다. 키가 눌려 이벤트가 전달되면 getModifierState() 함수로 Caps Lock이 눌렸는지 확인하고 화면에 상태를 업데이트합니다.

  • event.getModifierState("CapsLock") : CapsLock 키의 활성화/비활성화 상태 리턴
  • addEventListener("keyup", function(event) { ... }) : keyup 이벤트 발생 시, 함수 실행
const capsLockInput = document.getElementById("capsLockInput");
const capsLockStatus = document.getElementById("capsLockStatus");

capsLockInput.addEventListener("keyup", function(event) {
  let isCapsLockOn = event.getModifierState("CapsLock");
  updateCapsLockStatus(isCapsLockOn);
});

function updateCapsLockStatus(isCapsLockOn) {
  capsLockStatus.textContent = "Caps Lock 상태: " + (isCapsLockOn ? "활성화" : "비활성화");
}