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的面向对象方法以及差别
Mar 31 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
微信小程序input抖动问题的修复方法
Mar 03 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
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
土木工程应届生求职信
2013/10/31 职场文书
开会迟到检讨书
2014/01/08 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
活动总结怎么写
2014/04/28 职场文书
民主生活会剖析材料
2014/09/30 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
辅导员学期工作总结
2015/08/14 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA