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的函数重名看其初始化方式
Mar 08 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 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的几个常用数字判断函数代码
2012/04/24 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
简单谈谈python中的语句和语法
2017/08/10 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
Flask框架信号用法实例分析
2018/07/24 Python
学生信息管理系统python版
2018/10/17 Python
python判断链表是否有环的实例代码
2020/01/31 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
人力资源经理自我评价
2014/01/04 职场文书
新年主持词
2014/03/27 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
离婚协议书范文2015
2015/01/26 职场文书
商场收银员岗位职责
2015/04/07 职场文书
安全教育的主题班会
2015/08/13 职场文书
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS