javascript键盘事件_javascript

原创
2012/07/30 21:10
阅读数 881

[JavaScript]:e.which,e.charCode,e.keyCode

说明:

charCode:对于 keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。Internet Explorer 使用 event.keyCode 取回被按下的字符,而 Netscape/Firefox/Opera 使用 event.which。        

测试环境:

Internet Explorer 9.0.8112.16421 Firefax 9.0.1

Google Chrome 15.0.874.106 Safair 5.1 Opera 11.60

键盘事件:

在这3种事件类型中,keydown和keyup比较底层,而keypress比较高级。

keypress只能针对一些可以打印出来的字符有效,而对于功能按键,如F1-F12、Backspace、Enter、Escape、 PageUP、PageDown和箭头方向等,就不会产生keypress事件,但是可以产生keydown和keyup事件。然而在FireFox中,功能按键是可以产生keypress事件的。

e.which将给出该键的索引值,把索引值转化成该键的字母或数字值的方法需要用到静态函数String.fromCharCode()

在IE中,只有一个keyCode属性,并且它的解释取决于事件类型。对于keydown来说,keyCode存储的是按键码,对于 keypress事件来说,keyCode存储的是一个字符码。FireFox中keyCode始终为0,当keydown/keyup时,charCode=0,which为按键码。事件keypress时,which和charCode二者的值相同,存储了字符码。 在Opera中,keyCode和which二者的值始终相同,在keydown/keyup事件中,它们存储按键码,在keypress时间中,它们存储字符码,而charCode没有定义,始终是undefined。

 

浏览器

Internet Explorer 6/7/8

Firefox

Internet Explorer 9

Opera

Safari

Chrome

which undefined = = = = =
charCode undefined = = undefined = =
keyCode (√) 0 = = = =

 

 

/* @By :D.n.sky www.desetang.com */
function $A(s){
    return document.getElementById(s)?document.getElementById(s):s;
}
/* 输出 */
var viewKey = function (e){  
    var currKey=0,CapsLock=0;
    var e=e||event;
    currKey=e.keyCode||e.which||e.charCode;
    CapsLock=currKey >=65 && currKey <=90;
	var txt="type:"+e['type']
	       +"Current:"+String.fromCharCode(currKey)
		   +"Decimal:"+currKey
		   +"keyCode:"+e['keyCode']
		   +"which:"+e['which']
		   +"charCode:"+e['charCode']
		   +"大写:"+CapsLock
		   +"altKey:"+e['altKey']
		   +"ctrlKey:"+e['ctrlKey']
		   +"shiftKey:"+e['shiftKey']
		   +"repeat:"+e['repeat'];
     /* 美化 */
    txt=txt.replace(/(\d)/g,'<font color=#f00>$1</font>');
    $A('result').innerHTML=txt;
}
/* 关联事件 */
document.onkeypress= viewKey;

 

 推荐博文:

  1. 用类的概念写asp操作数据库类_asp
  2. 自己编写的ajax类_javascript
  3. AJAX核心XMLHttpRequest的属性和方法介绍_javascript
  4. 简单的php图片上传类_php
  5. 网页中的元素绑定/移除事件_javascript
  6. javascript获取元素css属性值_javascript
  7. 正则表达式验证数字/电话/手机/邮箱_javascript

 

 

展开阅读全文
加载中

作者的其它热门文章

打赏
0
5 收藏
分享
打赏
0 评论
5 收藏
0
分享
返回顶部
顶部
返回顶部
顶部