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 相关文章推荐
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
JsRender for object语法简介
Oct 31 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
vue登录路由验证的实现
Dec 13 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
javascript实现留言板功能
Feb 08 Javascript
ES6函数和数组用法实例分析
May 23 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 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 开发环境配置(Zend Studio)
2010/04/28 PHP
解析php中反射的应用
2013/06/18 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
python脚本后台执行方式
2019/12/21 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
Django celery异步任务实现代码示例
2020/11/26 Python
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
二手房买卖协议书
2014/04/10 职场文书
小摄影师教学反思
2014/04/27 职场文书
先进员工获奖感言
2014/08/14 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
初中班主任教育随笔
2015/08/15 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis