JavaScript를 통한 CapsLock 활성화 체크
만키로군어느 사이트에 로그인을 하다 보면 로그인을 하기위해 비밀번호 창에 암호를 입력합니다.
그런데 비밀번호창 특성상 입력한 글자가 아니기 때문에 CapsLock이 켜진지 모르고 사용하다가 재인증 절차를 밟아야 하는일이 생깁니다.
그런일들을 미연에 방지코자 비밀번호 입력시 CapsLock이 켜져있을 경우 알림창을 띄우는 방법을 소개하겠습니다.
기본적으로 필요한 것이 있습니다.
객체의 위치를 찾기 위해 JQuery가 필요합니다.(CapsLock 알림창이 입력 박스 아래 위치하기 위함)
저는 1.4.3 버전을 사용하고 있으나 다른버전을 사용하셔도 무난할 것 같습니다.
CapsLock 활성화체크를 위한 소스는 아래와 같습니다.
-----------------------------------------예제 시작-----------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CapsLock체크</title>
<style type="text/css">
.css-arrow-multicolor {
border-color: transparent transparent #003b83 transparent;
border-style:solid;
border-width:5px;
width:0;
height:0;
}
</style>
<script src="./jquery-1.4.3.min.js"" type="text/javascript"></script>
<script type="text/javascript">
//캡스락 활성화 Div 숨김
function fnCapsHide() {
$("#divCaps").hide();
}
//키보드 프레스 이벤트
/*
버튼 이벤트 발생시 CapsLock이 켜져있을 경우 활성화 창을 보여주는 부분입니다.(문자열에만 해당합니다.)
setTimeout("fnCapsHide()", 1500); <-- 요부분은 활성화 창이 계속 떠있으면 보기 흉하기 때문에 1.5초후에 자동으로 숨겨버립니다.
*/
function fnKeyPress(e) {
var keyCode = 0;
var shiftKey = false;
keyCode = e.keyCode;
if (e.keyCode == 0) {
keyCode = e.which;
}
shiftKey = e.shiftKey;
//Shift를 누르지 않은 상태에서 대문자 범위 일 경우
if ((keyCode >= 65 && keyCode <= 90) && !shiftKey) {
$("#divCaps").css("top", $("#txtShow").offset().top + 15);
$("#divCaps").css("left", $("#txtShow").offset().left);
$("#divCaps").show();
setTimeout("fnCapsHide()", 1500);
}
//Shift를 누른 상태에서 소문자 범위 일 경우
if ((keyCode >= 97 && keyCode <= 122) && shiftKey) {
$("#divCaps").css("top", $("#txtPwd").offset().top + 15);
$("#divCaps").css("left", $("#txtPwd").offset().left);
$("#divCaps").show();
setTimeout("fnCapsHide()", 1500);
}
}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="1" width="100%" height="500px;">
<tr>
<td align="center" >
CapsLock 확인 : <input type="textbox" id="txtShow" style="border:1px solid black;width:130px;vertical-align:bottom;" onkeypress="fnKeyPress(event)"/>
</td>
</tr>
</table>
<!-- CapsLock 활성화에 따른 경고창 -->
<div id="divCaps" style="display:none;position:absolute;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-left:5px;">
<div class="css-arrow-multicolor"></div>
</td>
</tr>
<tr>
<td style="border:2px solid #003b83;height:20px;background-color:White;">
<b>CapsLock</b> 키가 눌려있습니다.
</td>
</tr>
</table>
</div>
</body>
</html>
-----------------------------------------예제 종료-----------------------------------------
도움이 되셨다면 덧글한개 부탁드리겠습니다. ^^
Author
