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中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
老生常谈js数据类型
Aug 03 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
微信小程序tabBar设置实例解析
Nov 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
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
Python sep参数使用方法详解
2020/02/12 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
JSF界面控制层技术
2013/06/17 面试题
村级换届选举方案
2014/05/10 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
小爸爸观后感
2015/06/15 职场文书