[React] Caps Lock 키 활성화 유무 체크하기

:JavaScript capsLock 활성 유무 확인하기"라고 구글링 해서 아래 블로그를 찾았다.

[Javascript] Caps Lock 키 활성화 여부 체크하기

 

핵심은 onKeyPress와 함수인 것 같아서 둘을 활용하여 아래처럼 코드를 작성했다.

 

내 경우네는 useState를 사용하여 기본값은 false, capsLock이 활성화 되어 있는 경우 true로 state를 변경 해줬다.

// capsLock 확인
  const passwordKeyPress = (e) => {
    if (e.getModifierState("CapsLock")) {
      setConfirm({ ...confirm, password: true });
      return;
    } else {
      setConfirm({ ...confirm, password: false });
    }
  };

return (
    <Input
      onKeyPress={passwordKeyPress}
    />
  );

추가적으로 capsLock이 활성화(true)이면 아래처럼 span 태그를 출력하도록 코드를 구현했다.

{confirm.password && (
    <span className="password_guide">CapsLock이 켜져 있습니다.</span>
)}