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 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
JavaScript 事件参考手册
Dec 24 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
Javascript面向对象编程
Mar 18 Javascript
xml转json的js代码
Aug 28 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
vue组件间通信子与父详解(二)
Nov 07 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
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 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
PHP 文件上传全攻略
2010/04/28 PHP
PHP sprintf()函数用例解析
2011/05/18 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
拖动一个HTML元素
2006/12/22 Javascript
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
如何在python中判断变量的类型
2020/07/29 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
内科护士节演讲稿
2014/09/11 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
员工2014年度工作总结
2014/12/09 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
表扬信范文
2015/05/04 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
分享提高 Python 代码的可读性的技巧
2022/03/03 Python
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis