글 작성자: 써니루루
로그인 하다보면 암호를 입력하는 부분에서 CapsLock 키가 눌려있는지 확인하지 않아

대문자로 입력해 비밀번호가 틀렸다는 메시지를 볼 때가 있다

이럴 때에 아래와 같은 스크립트를 활용하여 Caps Lock 키가 눌려 있는 것이 아닌지 확인해주는 코드를 이용하면 좋지 않을까 생각한다.

아래의 코드는 사이트에 적용되어 있는 코드부분을 스크랩해온 내용이기 때문에 자신의 사이트에 적용하기 위해 조금의 손질을 해야 할 것이다.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
 <TITLE>Caps Lock Message</TITLE>
 <script type="text/javascript">
 function fnKeyPress(e)
 {
  var keyCode = 0;
  var shiftKey = false;
  keyCode = e.keyCode;
  shiftKey = e.shiftKey;
  if ((keyCode >= 65 && keyCode <= 90) && !shiftKey)
   fnShowCapsLockMsg();
  else
   fnHiddenCapsLockMsg();
 }
 function fnKeyDown(e)
 {
  var keyCode  = 0;
  keyCode = e.keyCode;
  if (keyCode == 20)
   fnHiddenCapsLockMsg();
 }
 function fnShowCapsLockMsg()
 {
  var divCapsLock = document.getElementById("CapsLock");
  divCapsLock.style.pixelTop = (document.body.clientHeight / 2) - (154 / 2);
  divCapsLock.style.pixelLeft = (document.body.clientWidth / 2) - (502 / 2);
  divCapsLock.style.display = "block";
 }
 function fnHiddenCapsLockMsg()
 {
  var divCapsLock = document.getElementById("CapsLock");
  divCapsLock.style.pixelTop = -154;
  divCapsLock.style.pixelLeft = -502;
  divCapsLock.style.display = "none";
 }
 </script>
</HEAD>

<BODY>
 <DIV ID="SomeForm">
 <FORM NAME="Form1" ID="Form1">
  <INPUT TYPE="TEXT" NAME="SomeText" ID="SomeText" VALUE="" SIZE="20" ONKEYPRESS="javascript:fnKeyPress(event);" ONKEYDOWN="javascript:fnKeyDown(event);" />
 </FORM>
 </DIV>
 <DIV ID="CapsLock" STYLE="display:none;">CapsLock 키가 눌려있습니다.</DIV>
</BODY>
</HTML>




티스토리툴바