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 强制设为首页的代码
Jan 31 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 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
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
轻松学习Javascript闭包函数
2015/12/15 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
python实现证件照换底功能
2019/08/20 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
财务会计专业个人求职信范本
2014/01/08 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
售后服务承诺书范文
2014/03/26 职场文书
校企合作协议书
2014/04/16 职场文书
出国留学计划书
2014/04/27 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
领导欢迎词范文
2015/01/26 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书