一、键盘事件

最新推荐文章于 2025-01-06 19:09:59 发布

weixin_33967071

最新推荐文章于 2025-01-06 19:09:59 发布

阅读量113

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/duke-shao/p/10456915.html

本文详细解析了键盘事件的三种类型：onkeydown、onkeyup和onkeypress的触发时机与使用方法，包括如何获取按键的虚拟键盘码和Unicode编码，以及如何判断组合键的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

键盘事件

 1 /*
 2     一.键盘事件
 3         
 4     1.onkeydown某个键盘按键被按下,按住不放会重复触发
 5         *e.which||e.keyCode属性声明键的虚拟键盘码,虚拟键盘码可能和使用的键盘的布局相关。
 6     2.onkeyup某个键盘按键被松开
 7         *e.which||e.keyCode属性声明键的虚拟键盘码，虚拟键盘码可能和使用的键盘的布局相关。
 8     3.onkeypress键盘（字符键）被按下触发，按住不放会重复触发
 9         *e.which||e.keyCode属性声明键的Unicode(ASCii码)
10         *charCodeAt() 方法可返回指定位置的字符的 Unicode 编码
11                 语法：stringObject.charCodeAt(index)
12         *fromCharCode() 可接受一个指定的 Unicode值，然后返回一个字符串。
13                 语法：String.fromCharCode(numX,numX,...,numX)
14                 此方法是String的静态方法
15     兼容：e.which 其他浏览器；e.keyCode IE
16         
17     4.   e.altKey/e.ctrlKey/e.shiftKey当事件被触发时，alt/ctrl/shift键是否被按下返回布尔值，仅支持onkeydown事件
18 */
19         var box1=document.getElementById('box1');
20         var box2=document.getElementById('box2');
21         var box3=document.getElementById('box3');
22         document.onkeydown=function(e){
23             if(e.which==65){
24                 box1.innerHTML+=String.fromCharCode(e.which);
25             }
26         }
27         document.onkeyup=function(e){
28             if(e.which==65){
29                 box2.innerHTML+="抬起";
30             }
31         }
32         document.onkeypress=function(e){
33             if(e.which==97){
34                 box3.innerHTML+="死按";
35             }
36         }
37         document.onkeydown=function(e){
38             if(e.shiftKey){
39                 box1.innerHTML+='按下';
40             }
41         }
42         document.onkeyup=function(e){
43             if(e.shiftKey){
44                 box2.innerHTML+='抬起';
45             }
46         }