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 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
vue项目中使用多选框的实例代码
Jul 22 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+xslt在windows平台上
2006/10/09 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
js实现简单的验证码
2015/12/25 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
Python实现感知器模型、两层神经网络
2017/12/19 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
django+mysql的使用示例
2018/11/23 Python
python实现飞机大战游戏
2020/10/26 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
应届生面试求职信
2014/07/02 职场文书
煤矿安全协议书
2014/08/20 职场文书
公司地址变更通知
2015/04/25 职场文书
党员证明模板
2015/06/19 职场文书
医院病假条怎么写
2015/08/17 职场文书
Python使用MapReduce进行简单的销售统计
2022/04/22 Python