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 相关文章推荐
javascript[js]获取url参数的代码
Oct 17 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
如何管理Vue中的缓存页面
Feb 06 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
PHP的博客ping服务代码
2012/02/04 PHP
PHP概率计算函数汇总
2015/09/13 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
js树形控件脚本代码
2008/07/24 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
js仿360开机效果
2019/12/26 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
Python3读取文件常用方法实例分析
2015/05/22 Python
python回调函数中使用多线程的方法
2017/12/25 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
django云端留言板实例详解
2019/07/22 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
银河香水:Galaxy Perfume
2019/03/25 全球购物
会计实训报告范文
2014/11/04 职场文书
新党员入党决心书
2015/09/22 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript
Oracle表空间与权限的深入讲解
2021/11/17 Oracle
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS