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 相关文章推荐
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
使用JS实现简易计算器
Jun 14 Javascript
vue中div禁止点击事件的实现
Apr 02 Vue.js
js判断两个数组相等的5种方法
May 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实现文件下载断点续传详解
2014/10/15 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
让您的菜单不离网站
2006/10/03 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
小程序实现多选框功能
2018/10/30 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
python计算N天之后日期的方法
2015/03/31 Python
python创建临时文件夹的方法
2015/07/06 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
python binascii 进制转换实例
2019/06/12 Python
Django REST framework内置路由用法
2019/07/26 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
Python文件操作函数用法实例详解
2019/12/24 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
函数指针的定义是什么
2016/08/14 面试题
银行实习的自我鉴定
2013/12/10 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
活动总结模板
2014/05/09 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书