How to - Caps Lock 감지

w3.css

Caps Lock 감지

JavaScript를 사용하여 입력 필드 내부에 Capslock이 켜져 있는지 확인하는 방법을 알아보자.

Caps Lock이 켜져 있는지 감지

1단계) HTML 추가

// Get the input field
var input = document.getElementById("myInput");

// Get the warning text
var text = document.getElementById("text");

// When the user presses any key on the keyboard, run the function
input.addEventListener("keyup", function(event) {

  // If "caps lock" is pressed, display the warning text
  if (event.getModifierState("CapsLock")) {
    text.style.display = "block";
  } else {
    text.style.display = "none"
  }
});

기본 예시

예제 보기