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 相关文章推荐
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 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常用函数小技巧
2008/09/11 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
Node.js模块加载详解
2014/08/16 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
React组件refs的使用详解
2018/02/09 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python列表去重的二种方法
2014/02/14 Python
Python中的生成器和yield详细介绍
2015/01/09 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
重阳节登山活动方案
2014/02/03 职场文书
网络技术专业推荐信
2014/02/20 职场文书
升职演讲稿范文
2014/05/23 职场文书
关键在于落实心得体会
2014/09/03 职场文书
自我检讨书范文
2015/01/28 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python