[JavaScript] 🌟 Caps Lock 활성화 여부 체크하기

목차

Form 태그 안에서 회원가입 기능이나, 로그인 기능을 만들 때 비밀번호에 Caps Lock이 된 채로 입력되어 문제가 발생하는 경우가 종종 있다. 왜냐하면 <input type="password" />를 사용하여 비밀번호를 입력할 때 화면에 입력글자가 * 로 표시 되기 때문이다.

 

따라서 Input 태그에 현재 입력하는 문자가 대문자인지 소문자인지 구분하기 위해서는 Javascript를 이용해 Caps Lock 상태에서 입력할 때 경고 메세지가 나오도록 하는 방법에 대해 작성해 보겠다.

---

Caps Lock 체크 만들기.

HTML 작성하기

우선 Html 부분에 Input과 Caps Lock 경고메세지를 띄울 div를 만든다. 그리고 Input 안에 onkeyup="checkCapsLock(event)"을 넣어서 Input 안에 경고메세지를 띄워준다. 만약 Input내용 작성을 전부 완료한 상태에서 메세지를 띄워주고 싶다면 onchange="checkCapsLock(event)"를 사용하면 된다.

HTML

<input
  id="name"
  // onkeyup는 바로바로 메세지를 출력시킴
  onkeyup="checkCapsLock(event)"
  // onchange를 사용하면 입력이 완료된 이후 경고창이 화면에 출력됨
  // onchange="checkCapsLock(event)"
  placeholder="작성해보세요."
  type="password"
/>
<div id="message"></div>

---

JavaScript 작성하기

Html을 전부 작성했다면 밑의 Javascript 코드를 작성하면 화면에 경고창이 출력된다.

JavaScript

function checkCapsLock(event)  {
  if (event.getModifierState("CapsLock")) {
    document.getElementById("message").innerText = "Caps Lock이 활성화된 상태입니다."
  } else {
    document.getElementById("message").innerText = ""
  }
}

---

🎉 완성 파일

전체 코드를 보고 싶으시다면 제가 만든 CodesandBox에서 확인하시면 됩니다.

---

참고 문헌

• 1[Javascript] Caps Lock 키 활성화 여부 체크하기
• 2[Javascript&JQuery] 비밀번호 Caps Lock 설정 방법 (영상)