input password 할 때 화면에 입력글자가 '*' 로 표시 되기 때문에
현재 입력하는 문자가 대문자인지 소문자인지 구분하기 힘들다.
그래서 Javascript를 이용해 capslock 상태에서 입력시 문구가 show 되어
사용자에게 알려 줄 수 있게 할 수 있다.
-----------------------------------------------------------
Javascript 부분
<script type="text/javascript">
function caps_lock(e) {
var keyCode = 0;
var shiftKey = false;
keyCode = e.keyCode;
shiftKey = e.shiftKey;
if (((keyCode >= 65 && keyCode <= 90) && !shiftKey)
|| ((keyCode >= 97 && keyCode <= 122) && shiftKey)) {
show_caps_lock();
setTimeout("hide_caps_lock()", 3500);
} else {
hide_caps_lock();
}
}
function show_caps_lock() {
$("#capslock").show();
}
function hide_caps_lock() {
$("#capslock").hide();
}
</script>
--------------------------------------------------------------------
<body> 태그 안
<input type="password" name="input_pwd" id="input_pwd" onkeypress="caps_lock(event)"/>
<p id="capslock" style="position:relative; border:2px solid #003b83; width:300px; bottom:0px; display:none">
<b>CapsLock</b> 키가 눌려있습니다.
</p>
'공부 > javascript' 카테고리의 다른 글
| (javascript) history.back() / history.go() (0) | 2015.11.09 |
|---|---|
| (javascript) confirm 확인창 (0) | 2015.11.09 |
| (javascript) url로 새창 띄우기 (0) | 2015.09.23 |
| (javascript) replace (0) | 2015.09.10 |
| (jQuery) 페이지 로딩후 바로 실행 (0) | 2015.09.01 |