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 数据类型转换总结笔记
Jan 17 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
通过url查找a元素并点击
Apr 09 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
js绘制一条直线并旋转45度
Aug 21 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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
农民C键的运用技巧
2020/03/04 星际争霸
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
JQuery 常用操作代码
2010/03/14 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
Python面向对象特殊成员
2017/04/24 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
加拿大留学自荐信
2014/01/28 职场文书
理财学专业自荐书
2014/06/28 职场文书
大专生求职信
2014/06/29 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
中秋节随笔
2015/08/15 职场文书
导游词之襄阳古城
2019/09/27 职场文书
一文搞懂MySQL索引页结构
2022/02/28 MySQL
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
利用Python实时获取steam特惠游戏数据
2022/06/25 Python