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


Posted in Javascript onJanuary 03, 2013

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 相关文章推荐
js 模拟气泡屏保效果代码
Jul 10 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 #Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 #Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 #Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 #Javascript
Javascript 判断是否存在函数的方法
Jan 03 #Javascript
JavaScript中“基本类型”之争小结
Jan 03 #Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 #Javascript
You might like
社区(php&&mysql)六
2006/10/09 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
php简单图像创建入门实例
2015/06/10 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
Javascript 继承实现例子
2009/08/12 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
python实现dict版图遍历示例
2014/02/19 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Python查询IP地址归属完整代码
2017/06/21 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
python 显示数组全部元素的方法
2018/04/19 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
Pygame的程序开始示例代码
2020/05/07 Python
Django配置跨域并开发测试接口
2020/11/04 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
解除劳动合同协议书范本
2014/04/14 职场文书
期中考试反思800字
2014/05/01 职场文书
住房抵押登记委托书
2014/09/27 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android