JavaScript鍵盤事件偵聽
在使用JavaScript做WEB鍵盤事件偵聽捕獲時，主要采用onkeypress、onkeydown、onkeyup三個事件進行出來。該三個事 件的執行順序如下：onkeydown -> onkeypress ->onkeyup。
在一般情況下，采用三種鍵盤事件均可對鍵盤輸入進行有效的響應。實際使用過程中的差別如下:
onkeypress事件不能對系統功能鍵(例如：后退、刪除等，其中對中文輸入法不能有效響應)進行正常的響應，
onkeydown和onkeyup均可以對系統功能鍵進行有效的攔截，但事件截獲的位置不同，可以根據具體的情況選擇不同的鍵盤事件。
由於onkeypress不能對系統功能鍵進行捕獲，導致window.event對象的keyCode屬性和onkeydown，onkeyup鍵盤事 件中獲取的keyCode屬性不同，主要表現在一下兩點：
onkeypress事件的keyCode對字母的大小寫敏感，而onkeydown、onkeyup事件 不敏感；
onkeypress事件的keyCode無法區分主鍵盤上的數字鍵和付鍵盤數字鍵的，而onkeydown、onkeyup的keyCode對 主付鍵盤的數字鍵敏感;
實現代碼摘自：http://www.cnblogs.com/xiaoao808/archive/2008/07/31/1257624.html
方法一：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>檢測大寫鎖定鍵</title> <style type="text/css"> <!-- *{margin:0;padding:0;} body{padding:2em;background:#242424;color:#ccc;} h1{text-align:center;line-height:200%;} h3{text-indent:1em;line-height:160%;color:#666;font-weight:normal;font-size:1em;} h3 a{color:#bbb; text-decoration:none;margin:0 0.5em;} h3 a:hover{color:#fff;} p{margin:5em;} span{margin:0 0.5em;font-size:85.7%;} --> </style> </head> <body> <h1>檢測大寫鎖定鍵 </h1> <form action="#" method="post"> <p><label for="password">密碼：</label><input type="password" id="password" name="password" /><span style="display:none;">大寫鎖定鍵被按下，請注意大小寫</span></p> </form> <script type="text/javascript"> //<![CDATA[ function detectCapsLock(event){ var e = event||window.event; var o = e.target||e.srcElement; var oTip = o.nextSibling; var keyCode = e.keyCode||e.which; // 按鍵的keyCode var isShift = e.shiftKey ||(keyCode == 16 ) || false ; // shift鍵是否按住 if ( ((keyCode >= 65 && keyCode <= 90 ) && !isShift) // Caps Lock 打開，且沒有按住shift鍵 || ((keyCode >= 97 && keyCode <= 122 ) && isShift)// Caps Lock 打開，且按住shift鍵 ){oTip.style.display = '';} else{oTip.style.display = 'none';} } document.getElementById('password').onkeypress = detectCapsLock; //]]> </script> </body> </html>
#######################################################################################################################
方法二：
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Detect Caps Lock </TITLE> <script> function detectCapsLock(e){ valueCapsLock = e.keyCode ? e.keyCode:e.which; // Caps Lock 是否打開 valueShift = e.shiftKey ? e.shiftKey:((valueCapsLock == 16 ) ? true : false ); // shift鍵是否按住 if (((valueCapsLock >= 65 && valueCapsLock <= 90 ) && ! valueShift) // Caps Lock 打開，並且 shift鍵沒有按住 || ((valueCapsLock >= 97 && valueCapsLock <= 122 ) && valueShift)) // Caps Lock 打開，並且按住 shift鍵 document.getElementById('capStatus').style.visibility = 'visible'; else document.getElementById('capStatus').style.visibility = 'hidden'; /* javascript中keyCode代碼對應表 event.keyCode=32 空格 event.keyCode=13 回車 event.keyCode=27 Esc event.keyCode=16) Shift event.keyCode=17) Ctrl event.keyCode=18) Alt */ } </script> </HEAD> <BODY> <input type ="password" name ="pwd" onkeypress ="detectCapsLock(event)" /> <div id ="capStatus" style ="visibility:hidden"><font color =red> Caps Lock is on. <font></div> </BODY> </HTML>