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 相关文章推荐
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
arguments对象
2006/11/20 Javascript
不安全的常用的js写法
2009/09/15 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
python实现批量改文件名称的方法
2015/05/25 Python
python抓取网页中图片并保存到本地
2015/12/01 Python
python psutil库安装教程
2018/03/19 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
Python修改DBF文件指定列
2020/12/19 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
.net面试题
2015/12/22 面试题
你懂得怎么写自荐信吗?
2013/12/27 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
单身证明范本
2015/06/15 职场文书