[Javascript&JQuery] 비밀번호 Caps Lock 설정 방법 (영상)

 

흔히 비밀번호 사용시에 Caps Lock이 눌려 비밀번호가 틀리다는 메세지를 많이 접하게 됩니다.

그래서 최근 사이트에서는 비밀번호 입력시에 Caps Lock의 활성화 여부를 알려줍니다.

 

 

생각보다 간단히 구현이 가능한 이 Caps Lock를 포스팅을 하려합니다. 

제가 구현한 결과 영상입니다.

 

 

 

 

 

Caps Lock을 누르는 순간 Caps Lock이 켜졌다는 메세지가 나오게 되어 

비밀번호를 틀릴 가능성을 낮춰주게 됩니다.

 

 

 

 

---

 

 

 

우선 Caps Lock 기능을 만들기 위해선 자바스크립트에서 제공하는 몇개의 메서드를 알아야하니다.

 

 

querySelector : 하위 엘리먼트 요소 중에 첫번째 요소만 반환합니다.


addEventListener : 여러개의 이벤트 핸들러를 등록할 수 있습니다.
(click / mouseover / focus / blur / keypress 등...)  


getModifierState : Caps Lock, Fn 키 등이 켜져 있는지의 여부를 확인할 수 있는 키보드 이벤트입니다.
(CapsLock / NumLock / ScrollLock / Alt / Shift  / Ctrl)

 

 

 

 

 

 

 

HTML 

 

 

 

<div>
    <input type="pwd" id="pwd" name="pwd"  placeholder="비밀번호" />
    <span id="pwd_hint" style="color:red;"></span>
</div>

 

 

 

 

HTML에서는 일반 비밀번호 입력칸과 같이 input을 설정해줍니다.

여기서 Caps Lock이 활성화 여부를 나타내기 위해서 span태그를 하나 더 만들어 주는 것이 특징입니다.

 

 

 

 

 

 

 

SCRIPT

 

 

<script type="text/javascript">
 
 document.querySelector('input[name=pwd]').addEventListener('keyup', function(e){
    if (e.getModifierState){
        if (e.getModifierState('CapsLock')) {
            $("#pwd_hint").html('CAPS LOCK 켜져 있습니다.');
            $("#pwd_hint").css('display', 'block');
        }else {
            $("#pwd_hint").css('display', 'none');
        }
        
    }
  });
  
</script>

 

 

중요한 부분이 모여있는 script부분입니다.

 

querySelector를 이용하여 자식요소를 불러내고,

addEventListener 를 이용하여 keyup이벤트를 불러냅니다.

(keyup은 키를 눌렀다가 땔때 발생하는 이벤트입니다.)

 

마지막으로 getModifierState은 키보드 이벤트로 CapsLock을 선언하여 

조건문으로 Caps Lock의 활성화 여부를 선택해줍니다.

 

true라면 활성화되었다는 문구를 넣어주고 숨겨져있는 pwd_hint를 보여주며,

false라면 숨겨줘서 기능을 완성시켜줍니다.