`

Javascript 检测键盘按键

 
阅读更多

Javascript中 有3个事件句柄在对应键盘的输入状态:keydown、keypress和keyup。
分别对应的意思是:按键被按下(按下按键但还没有抬起)、点击按键(按下并抬起按键)、按键抬起(按键抬起之后)

按键的分类

按键可以分为“实键”和“虚键”
实键可以理解为我们能够看到并打印出来的按键,如字母“A”、数字“1”、字符“?”等等
虚键就是那些无法打印出来起到控制作用的按键,如“Ctrl”、“Alt”、“Shift”、“方向键”等等
IE在处理虚键时有个特例:虚键不会产生keypress事件,必须使用keydown或keyup来捕获

按键码和字符码

按键码是计算机用来识别不同按键的编码,每一个按键都有按键码
字符码是可被打印的实键特有的,对应了键盘上显示的字符
按键码可以使用String.fromCharCode()转换为字符码
按键码和和字符码的对应表可以在本文最后找到。

获取实键

function getKeyCode(e) {
var keyCode = 0;
var e = e || window.event;
keyCode = e.keyCode || e.which || e.charCode;
alert(keyCode);
}

稍微解释下
1. e为Firefox等标准浏览器支持的JS隐藏变量,表示一个“事件”;IE系列中没有“e”,而是用window.event来表示“事件”;所以var e = e || window.event;就表示:获取当前正在发生的事件。
2. e.keyCode、e.which、e.charCode都代表获取按键码,但不同的浏览器支持不同的写法

 

获取虚键

function getKeyCode(e) {
var keyCode = 0;
var e = e || window.event;
if (e.ctrlKey) alert("ctrlKey pressed");
if (e.altKey) alert("altKey pressed");
if (e.shiftKey) alert("shiftKey pressed");
}
字母和数字键的键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
A 65 J 74 S 83 1 49
B 66 K 75 T 84 2 50
C 67 L 76 U 85 3 51
D 68 M 77 V 86 4 52
E 69 N 78 W 87 5 53
F 70 O 79 X 88 6 54
G 71 P 80 Y 89 7 55
H 72 Q 81 Z 90 8 56
I 73 R 82 0 48 9 57

 

 

数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
0 96 8 104 F1 112 F7 118
1 97 9 105 F2 113 F8 119
2 98 * 106 F3 114 F9 120
3 99 + 107 F4 115 F10 121
4 100 Enter 108 F5 116 F11 122
5 101 - 109 F6 117 F12 123
6 102 . 110        
7 103 / 111        

 

 

控制键键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
BackSpace 8 Esc 27 Right Arrow 39 -_ 189
Tab 9 Spacebar 32 Dw Arrow 40 .> 190
Clear 12 Page Up 33 Insert 45 /? 191
Enter 13 Page Down 34 Delete 46 `~ 192
Shift 16 End 35 Num Lock 144 [{ 219
Control 17 Home 36 ;: 186 \| 220
Alt 18 Left Arrow 37 =+ 187 ]} 221
Cape Lock 20 Up Arrow 38 ,< 188 '" 222

 


多媒体键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
音量加 175            
音量减 174            
停止 179            
静音 173            
浏览器 172            
邮件 180            
搜索 170            
收藏 171
分享到:
评论

相关推荐

    Javascript 检测键盘按键信息及键码值对应介绍

    本文将深入探讨如何使用JavaScript来检测键盘按键信息以及键码值。 首先,JavaScript中用于键盘事件的三个主要事件句柄是`keydown`、`keypress`和`keyup`。这些事件分别对应于键盘输入的不同阶段: 1. `keydown`...

    检测键盘按键

    使用javascript检测键盘按钮,并显示对应的编码

    测试键盘的各个按键的值

    这种方法可以帮助检测按键是否正常工作,是否存在死键或者按键响应不一致的问题。 5. 键盘事件处理:在编程中,通常会用到键盘事件监听,比如在JavaScript、Python或C#中,可以通过注册事件处理器来捕获用户的键盘...

    javascript30-1键盘按键交互动画特效

    当JavaScript检测到按键事件时,动态地将这个类添加到相应元素上,从而触发动画。 同时,CSS用于设置元素的初始样式,比如布局、颜色、尺寸等,以确保动画在视觉上有吸引力且易于理解。使用CSS预处理器(如Sass或...

    javascript经典特效---检测键盘的按键.rar

    在本文中,我们将深入探讨JavaScript如何检测键盘按键,这是创建各种网页交互效果和游戏的重要技术。 首先,我们需要了解键盘事件。在JavaScript中,有两个主要的键盘事件:`keydown` 和 `keyup`。`keydown` 事件在...

    精美的检测键盘按键的工具可以尽管下载

    标题中的“精美的检测键盘按键的工具”暗示我们这里涉及的是一个软件或程序,它能够捕获并分析来自键盘的输入。这样的工具在各种场景下都有应用,例如开发者可能用它来测试应用程序的键盘交互功能,或者在游戏开发中...

    检测键盘的按键.rar

    这些示例展示了不同编程语言检测键盘按键的基本方法。在实际应用中,可能需要根据具体需求进行更复杂的处理,比如处理组合键、非ASCII字符等。确保在合适的事件循环中处理键盘事件,以免错过任何按键。同时,注意跨...

    JavaScript获取键盘按键的键码(参照表)

    本教程将详细讲解如何使用JavaScript获取键盘按键的键码,并给出一个键码对照表,方便开发者快速查找。 首先,我们需要了解JavaScript中的键盘事件对象event,它包含了多个属性,其中.keyCode属性能返回按下的键的...

    javascript 屏幕软键盘

    JavaScript屏幕软键盘通过在网页上动态创建和显示一组可点击的按键,来实现用户输入,可以有效地提高用户交互的安全性和便利性。 要实现JavaScript屏幕软键盘,你需要掌握以下几个关键知识点: 1. **DOM操作**:...

    原生js检测键位,当前实时坐标例子

    在JavaScript中,我们可以通过监听`keydown`、`keyup`和`keypress`事件来检测键盘输入。`keydown`事件在用户按下键盘键时触发,`keyup`事件在用户释放键盘键时触发,而`keypress`事件则在字符键被按下并释放时触发...

    使用JS监听键盘按下事件(keydown event)

    其中,keydown事件在用户按下键盘上的任意键时触发,keypress事件在按键被按下并产生字符时触发,keyup事件则在键盘键被释放时触发。本文主要关注keydown事件的监听。 要监听全局的键盘按下事件,可以使用jQuery中...

    Javascript键盘虚拟键值编码表

    这个编码表提供了每个键盘按键对应的ASCII或Unicode值,这些值可以在JavaScript的键盘事件对象(如`event.keyCode`)中获取。下面是对键盘虚拟键值编码表的详细解释: 1. **字母和数字键**:对于大写和小写字母,...

    一款非常经典实用的JavaScript屏幕软键盘

    JavaScript屏幕软键盘是一种基于Web的输入解决方案,尤其适用于那些在移动设备或公共计算机上需要保护用户隐私的应用场景,因为它们防止了物理键盘上的按键记录。在这个项目中,我们看到一个非常经典且实用的实现,...

    一款简单的使用键盘按键的Html5贪吃蛇特效

    【标题】"一款简单的使用键盘按键的Html5贪吃蛇特效"揭示了这个项目的核心——使用HTML5技术实现了一个互动的贪吃蛇游戏。在HTML5中,这项技术提供了丰富的功能,使得创建交互式网页应用变得更为简单。贪吃蛇游戏是...

    检测鼠标按键案例开发

    例如,在JavaScript中,我们可以使用`addEventListener`方法监听`mousedown`和`mouseup`事件,以判断鼠标按键的按下与释放;在Python的tkinter库中,可以使用`bind`函数绑定特定的事件处理函数。 下面,我们以一个...

Global site tag (gtag.js) - Google Analytics