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检测函数
May 31 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
AngularJS手动表单验证
Feb 01 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 Javascript
vue $router和$route的区别详解
Dec 02 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
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
详解Python中用于计算指数的exp()方法
2015/05/14 Python
python批量提取word内信息
2015/08/09 Python
python迭代器与生成器详解
2016/03/10 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
大学生社会实践自我鉴定
2014/03/24 职场文书
房产代理公证处委托书
2014/04/04 职场文书
洗手间标语
2014/06/23 职场文书
户籍证明书标准模板
2014/09/10 职场文书
中考学习决心书
2015/02/04 职场文书
读书笔记格式
2015/07/02 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
修改并编译golang源码的操作步骤
2021/07/25 Golang
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫