View
로그인 시 사용자들은 대부분
자기가 비밀번호를 잘못설정해놨다고 생각하지
이게 대소문자 때문이라고는 생각하지 못하는 경우가 많다.
비밀번호 오류나면
관리자도 귀찮고 사용자도 귀찮으니
로그인 페이지 구현시 해두면 좋은
'Caps Lock' 여부 알려주는 기능 구현해보기 !
👉 javascript 기능 중 getModifierState 를 이용해봅시다 !
<head>
<script type="text/javascript">
window.onload = function() {
document.getElementById("njInput").addEventListener("keydown", function(event) {
var cLAlert = document.getElementById("cLAlert");
if (event.getModifierState("CapsLock")) {
cLAlert.style.display = "block";
} else {
cLAlert.style.display = "none";
}
});
}
</script>
</head>
<body>
<div>
<input type="text" id="njInput">
<div id="cLAlert">Caps Lock이 켜져있습니다.</div>
</div>
</body>
</html>
해당 소스를 이용해서 코드를 만든 후
css 조금 변경해주면 아래와 같이 caps Lock 버튼이 눌려져있음을
알려주는 창이 뜬다
capsLock 키를 구분해내기 위해 getModifierState 함수를 사용했는데
Alt, NumLock 등에서도 사용할 수 있다.
더 자세한 내용은 getModifierState문서 에서 확인할 수 있다
'JavaScript' 카테고리의 다른 글
| javascript :: POST 방식으로 새 창 띄우기 (0) | 2022.03.08 |
|---|---|
| javascript :: SheetJS 테이블들 엑셀 시트 별로 다운로드하기 (4) | 2021.06.17 |
| javascript :: keyCode 목록과 keycode 이벤트 이용하여 엔터키 실행하기 (0) | 2020.08.04 |
reply
