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 Discuz代码中的msn聊天小功能
May 25 Javascript
javaScript 数值型和字符串型之间的转换
Jul 25 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
json数据的列循环示例
Sep 06 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 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
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
NodeJS制作爬虫全过程
2014/12/22 NodeJs
JavaScript获取URL汇总
2015/06/08 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
python字符串,数值计算
2016/10/05 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
临床医学专业个人的自我评价
2013/09/27 职场文书
护士岗位职责
2014/02/16 职场文书
大课间体育活动方案
2014/03/12 职场文书
英文版辞职信
2015/02/28 职场文书
PHP解决高并发问题
2021/04/01 PHP
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python