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代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 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
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
Python常用的日期时间处理方法示例
2015/02/08 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
python中redis的安装和使用
2016/12/04 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
Python并行分布式框架Celery详解
2018/10/15 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
新大陆软件面试题
2016/11/24 面试题
毕业生面试求职信
2014/06/23 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
JVM之方法返回地址详解
2022/02/28 Java/Android
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers