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 相关文章推荐
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
Angularjs 基础入门
Dec 26 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 Javascript
JS实现纸牌发牌动画
Jan 19 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同时支持GIF、png、JPEG
2006/10/09 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
JQuery 常用操作代码
2010/03/14 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
环境卫生标语
2014/06/09 职场文书
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
德生2P3收音机开箱评测
2022/04/30 无线电