[React] Login 페이지 - password CapsLock 표시

Login 페이지에서 CapsLock이 켜져 있는지 꺼져 있는지 확인해주는 기능을 구현해보자

 

 

 

state로 capsLockFlag의 boolean 값을 관리해준다.

 const [capsLockFlag, setCapsLockFlag] = useState(false);

 

 

input에 포커스가 되고 어떤 키든 눌렀다가 떼는 순간 이벤트가 실행되면서

capslock이 켜져 있는지에 대한 여부를 확인하게 된다

// password입력칸에서 키보드의 키를 눌렀다가 떼는순간 이벤트는 실행이 된다
<input type='password' onKeyUp={(e) => checkCapsLock(e)} />

// 위의 이벤트가 실행이 되고 capsLockFlag의 boolean값에 따라 출력값이 달라진다
<Span>
    {capsLockFlag ? "Caps Lock이 켜져 있습니다" : ""}
</Span>

 

getModifierState("CapsLock") 이 CapsLock의 상태를 켜져 있으면 true / 꺼져있으면 false로 반환해준다

이 boolean값을 CapsLockFlag에 넣어서 위의 span의 출력 값을 바꿔주도록 한다.

 const checkCapsLock = (e) => {
    let capsLock = e.getModifierState("CapsLock");
    setCapsLockFlag(capsLock);
  };

 

keyboardEvent.getModifierState( )

-> 키보드 이벤트 함수로 키보드의 키의 상태를 true/ false로 반환한다.

어떤 키를 어떤 운영체제별로 체크가 되는지는 아래 링크에서 더 자세하게 확인할 수 있다.

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState

KeyboardEvent.getModifierState() - Web APIs | MDN