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 相关文章推荐
JavaScript 事件对象的实现
Jul 13 Javascript
js和as的稳定传值问题解决
Jul 14 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 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
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
Python3实现定时任务的四种方式
2019/06/03 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
python异常处理try except过程解析
2020/02/03 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
python设置表格边框的具体方法
2020/07/17 Python
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
外语系毕业生自荐信范文
2013/12/16 职场文书
车间副主任岗位职责
2013/12/24 职场文书
小学教师培训感言
2014/02/11 职场文书
机电一体化求职信
2014/03/10 职场文书
小学新学期寄语
2014/04/02 职场文书
应届毕业生求职信
2014/05/26 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
2015公司年度工作总结
2015/05/14 职场文书