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 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
详解vue组件之间的通信
Aug 30 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获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
PHP插入排序实现代码
2013/04/04 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
js加强的经典分页实例
2013/03/15 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
Python 移动光标位置的方法
2019/01/20 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
pymysql模块的操作实例
2019/12/17 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
护理学毕业生求职信
2013/11/14 职场文书
捐书活动总结
2014/05/04 职场文书
社会实践活动总结范文
2014/07/03 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
Python进度条的使用
2021/05/17 Python
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js