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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
方法一：<br><!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><br>
<br>#######################################################################################################################
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
方法二：<br><br><! 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> 

 

 

posted @   无边身尊者  阅读(3488)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示