javascript之键盘事件

最新推荐文章于 2022-11-26 17:18:05 发布

转载最新推荐文章于 2022-11-26 17:18:05 发布 · 445 阅读

本文深入解析了键盘事件的处理机制，包括keydown、keypress和keyup事件的使用方法，并提供了兼容不同浏览器环境的代码实现。详细介绍了如何获取按键码及对应字符，以及在文本框和body标记中的键码差异。

原文地址：http://blog.youkuaiyun.com/u012152619/article/details/41819433

键盘事件包含onkeydown、onkeypress和onkeyup这三个事件

事件初始化

[javascript]view plaincopyprint? 
   
 function keyDown(){}   
   
     document.onkeydown = keyDown;   
   
     //论按下键盘上的哪个键，都将调用KeyDown()函数。

DOM标准下

[javascript]view plaincopyprint? 
   
 function keyDown(e) {   
   
 　   var keycode = e.which;   //取得对应的键值（数字）  
   
 　   var realkey = String.fromCharCode(e.which); //取得代表改键的真正字符  
   
 　   alert("按键码: " + keycode + " 字符: " + realkey);   
   
 　　 }   
   
 　   document.onkeydown = keyDown

IE下

[javascript]view plaincopyprint? 
   
 function keyDown() {   
   
 　　 　　 var keycode = event.keyCode;   //IE下取得键值的方法  
   
 　　 　　 var realkey = String.fromCharCode(event.keyCode);   
   
 　　 　　 alert("按键码: " + keycode + " 字符: " + realkey);   
   
 　　 }   
   
 　　 document.onkeydown = keyDown

兼容的方法

[javascript]view plaincopyprint? 
   
 function keyUp(e) {   
   
 　　 　 var currKey=0,e=e||event;   
   
 　　 　 currKey=e.keyCode||e.which||e.charCode;   
   
 　　 　　var keyName = String.fromCharCode(currKey);   
   
 　　 　 alert("按键码: " + currKey + " 字符: " + keyName);   
   
 　　 }   
   
 　　 document.onkeyup = keyUp;