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 cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
Vue路由前后端设计总结
Aug 06 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实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
使用python实现rsa算法代码
2016/02/17 Python
Python中%r和%s的详解及区别
2017/03/16 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
设置python3为默认python的方法
2018/10/31 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
故宫英文导游词
2015/01/31 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
springcloud整合seata
2022/05/20 Java/Android