javascript中键盘事件用法实例分析


Posted in Javascript onJanuary 30, 2015

本文实例分析了javascript中键盘事件用法。分享给大家供大家参考。具体如下:

键盘事件包含onkeydown、onkeypress和onkeyup这三个事件

事件初始化

function keyDown(){} 
document.onkeydown = keyDown; 
//论按下键盘上的哪个键,都将调用KeyDown()函数。

DOM标准下

function keyDown(e) { 
var keycode = e.which; //取得对应的键值(数字) 
var realkey = String.fromCharCode(e.which); //取得代表改键的真正字符 
alert("按键码: " + keycode + " 字符: " + realkey); 
} 
document.onkeydown = keyDown

IE下

function keyDown() { 
 
 var keycode = event.keyCode; //IE下取得键值的方法 

 
 var realkey = String.fromCharCode(event.keyCode); 

 
 alert("按键码: " + keycode + " 字符: " + realkey); 
} 
document.onkeydown = keyDown

兼容的方法

function keyUp(e) { 
   var currKey=0,e=e||event; 

   currKey=e.keyCode||e.which||e.charCode; 

 
var keyName = String.fromCharCode(currKey); 

   alert("按键码: " + currKey + " 字符: " + keyName); 
} 
document.onkeyup = keyUp;

使用原则:keydown事件对于功能按键来说是最有用的,而keypress事件对于可打印按键来说是最有用的
 
以下键码值只有在文本框中才完全有效,如果在<body>标记中使用,只有字母键、数字键和部分控制键可用,其字母键和数字键的键值与ASCII值相同

字母和数字键的键码值(keyCode)

按键     键码
A           65
B           66
C           67
D           68
E           69
F           70
G           71
H           72
I            73
J            74
K           75
L           76
M          77
N           78
O          79
P           80
Q          81
R           82
S           83
T           84
U           85
V           86
W          87
X           88
Y           89
Z           90
0           48
1           49
2           50
3           51
4           52
5           53
6           54
7           55
8           56
9           57

数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode)

按键     键码
0      96
1           97
2         98
3           99
4           100
5           101
6           102
7           103
8           104
9           105
*           106
+           107
Enter           108
-            109
.            110
/            111
F1         112
F2         113
F3         114
F4         115
F5         116
F6         117
F7         118
F8         119
F9         120
F10              121
F11              122
F12              123

控制键键码值(keyCode)

按键            键码
BackSpace          8
Esc              27
Right Arrow        39
Left Arrow         37
Down Arrow              40
Up Arrow            38
-_          189
.>         190
Spacebar            32
Tab              9
Clear           12
Page Up              33
Page Down         34
Enter           13
Insert           45
;:           186
Delete         46
`~          192
/?          191
Num Lock           144
Control      17
Home          36
End              35
Shift             16
[{           219
}]           221
\|          220
=+         187
,<          188
'"           222
Cape Lock           20
Alt         18

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
Angular实现表单验证功能
Nov 13 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
javascript中cookie对象用法实例分析
Jan 30 #Javascript
javascript事件模型实例分析
Jan 30 #Javascript
JS是按值传递还是按引用传递
Jan 30 #Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 #Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 #Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 #Javascript
js实现屏幕自适应局部代码分享
Jan 30 #Javascript
You might like
php实现水仙花数的4个示例分享
2014/04/08 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
python条件和循环的使用方法
2013/11/01 Python
Python标准库defaultdict模块使用示例
2015/04/28 Python
python查找指定具有相同内容文件的方法
2015/06/28 Python
Python实现的选择排序算法示例
2017/11/29 Python
Python随机函数random()使用方法小结
2018/04/29 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
Python 支付整合开发包的实现
2019/01/23 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
最热门的自我评价
2013/12/30 职场文书
销售团队激励口号
2014/06/06 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
公司会议开幕词
2015/01/29 职场文书
暑期工社会实践报告
2015/07/13 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
instantclient客户端 连接oracle数据库
2022/04/26 Oracle