转:js监控键盘大小写事件

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  
 1 方法一:<br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>检测大写锁定键</title>
 6 <style type="text/css">
 7 <!--
 8 *{margin:0;padding:0;}
 9 body{padding:2em;background:#242424;color:#ccc;}
10 h1{text-align:center;line-height:200%;}
11 h3{text-indent:1em;line-height:160%;color:#666;font-weight:normal;font-size:1em;}
12 h3 a{color:#bbb; text-decoration:none;margin:0 0.5em;}
13 h3 a:hover{color:#fff;}
14 p{margin:5em;}
15 span{margin:0 0.5em;font-size:85.7%;}
16 -->
17 </style>
18 </head>
19  
20 <body>
21 <h1>检测大写锁定键        </h1>
22 <form action="#" method="post">
23 <p><label for="password">密码:</label><input type="password" id="password" name="password" /><span style="display:none;">大写锁定键被按下,请注意大小写</span></p>
24 </form>
25 <script type="text/javascript">
26 //<![CDATA[
27 function  detectCapsLock(event){
28     var e = event||window.event;
29     var o = e.target||e.srcElement;
30     var oTip = o.nextSibling;
31     var keyCode  =  e.keyCode||e.which; // 按键的keyCode
32     var isShift  =  e.shiftKey ||(keyCode  ==   16 ) || false ; // shift键是否按住
33      if (
34      ((keyCode >=   65   &&  keyCode  <=   90 )  &&   !isShift) // Caps Lock 打开,且没有按住shift键
35      || ((keyCode >=   97   &&  keyCode  <=   122 )  &&  isShift)// Caps Lock 打开,且按住shift键
36      ){oTip.style.display = '';}
37      else{oTip.style.display  =  'none';}
38 }
39 document.getElementById('password').onkeypress = detectCapsLock;
40 //]]>
41 </script>
42 </body>
43 </html><br>
44 <br>#######################################################################################################################
 1 方法二:<br><br><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
 2 <HTML>  
 3 <HEAD>  
 4 <TITLE>  Detect Caps Lock </TITLE>  
 5 <script>  
 6 function  detectCapsLock(e){ 
 7    valueCapsLock  =  e.keyCode ? e.keyCode:e.which; // Caps Lock 是否打开  
 8    valueShift  =  e.shiftKey ? e.shiftKey:((valueCapsLock  ==   16 ) ? true : false ); // shift键是否按住 
 9  
10     if (((valueCapsLock >=   65   &&  valueCapsLock  <=   90 )  &&   ! valueShift) // Caps Lock 打开,并且 shift键没有按住  
11     || ((valueCapsLock >=   97   &&  valueCapsLock  <=   122 )  &&  valueShift)) // Caps Lock 打开,并且按住 shift键  
12        document.getElementById('capStatus').style.visibility  =  'visible'; 
13     else  
14        document.getElementById('capStatus').style.visibility  =  'hidden'; 
15  
16   /*  
17  javascript中keyCode代码对应表 
18  event.keyCode=32        空格 
19  event.keyCode=13        回车 
20  event.keyCode=27        Esc 
21  event.keyCode=16)        Shift 
22  event.keyCode=17)        Ctrl 
23  event.keyCode=18)        Alt 
24   */  
25  
26 } 
27 </script>  
28 </HEAD>  
29  
30 <BODY>  
31 <input  type ="password"  name ="pwd"  onkeypress ="detectCapsLock(event)"   />  
32 <div  id ="capStatus"  style ="visibility:hidden"><font  color =red> Caps Lock is on. <font></div>  
33 </BODY>  
34 </HTML> 

 

 

转载自:https://www.cnblogs.com/noxy/p/5788612.html

上一篇:AndroidN新增物理按键[android7.1.2][msm8953]


下一篇:chaper 6-3 图的遍历