js获取及判断键盘按键的方法


Posted in Javascript onDecember 01, 2015

本文实例讲述了js获取及判断键盘按键的方法。分享给大家供大家参考,具体如下:

js 里面的键盘事件经常用到,所以收集了键盘事件对应的键码来分享下:

keyCode 8 = BackSpace BackSpace
keyCode 9 = Tab Tab
keyCode 12 = Clear
keyCode 13 = Enter
keyCode 16 = Shift_L
keyCode 17 = Control_L
keyCode 18 = Alt_L
keyCode 19 = Pause
keyCode 20 = Caps_Lock
keyCode 27 = Escape Escape
keyCode 32 = space
keyCode 33 = Prior
keyCode 34 = Next
keyCode 35 = End
keyCode 36 = Home
keyCode 37 = Left
keyCode 38 = Up
keyCode 39 = Right
keyCode 40 = Down
keyCode 41 = Select
keyCode 42 = Print
keyCode 43 = Execute
keyCode 45 = Insert
keyCode 46 = Delete
keyCode 47 = Help
keyCode 48 = 0 equal braceright
keyCode 49 = 1 exclam onesuperior
keyCode 50 = 2 quotedbl twosuperior
keyCode 51 = 3 section threesuperior
keyCode 52 = 4 dollar
keyCode 53 = 5 percent
keyCode 54 = 6 ampersand
keyCode 55 = 7 slash braceleft
keyCode 56 = 8 parenleft bracketleft
keyCode 57 = 9 parenright bracketright
keyCode 65 = a A
keyCode 66 = b B
keyCode 67 = c C
keyCode 68 = d D
keyCode 69 = e E EuroSign
keyCode 70 = f F
keyCode 71 = g G
keyCode 72 = h H
keyCode 73 = i I
keyCode 74 = j J
keyCode 75 = k K
keyCode 76 = l L
keyCode 77 = m M mu
keyCode 78 = n N
keyCode 79 = o O
keyCode 80 = p P
keyCode 81 = q Q at
keyCode 82 = r R
keyCode 83 = s S
keyCode 84 = t T
keyCode 85 = u U
keyCode 86 = v V
keyCode 87 = w W
keyCode 88 = x X
keyCode 89 = y Y
keyCode 90 = z Z
keyCode 96 = KP_0 KP_0
keyCode 97 = KP_1 KP_1
keyCode 98 = KP_2 KP_2
keyCode 99 = KP_3 KP_3
keyCode 100 = KP_4 KP_4
keyCode 101 = KP_5 KP_5
keyCode 102 = KP_6 KP_6
keyCode 103 = KP_7 KP_7
keyCode 104 = KP_8 KP_8
keyCode 105 = KP_9 KP_9
keyCode 106 = KP_Multiply KP_Multiply
keyCode 107 = KP_Add KP_Add
keyCode 108 = KP_Separator KP_Separator
keyCode 109 = KP_Subtract KP_Subtract
keyCode 110 = KP_Decimal KP_Decimal
keyCode 111 = KP_Divide KP_Divide
keyCode 112 = F1
keyCode 113 = F2
keyCode 114 = F3
keyCode 115 = F4
keyCode 116 = F5
keyCode 117 = F6
keyCode 118 = F7
keyCode 119 = F8
keyCode 120 = F9
keyCode 121 = F10
keyCode 122 = F11
keyCode 123 = F12
keyCode 124 = F13
keyCode 125 = F14
keyCode 126 = F15
keyCode 127 = F16
keyCode 128 = F17
keyCode 129 = F18
keyCode 130 = F19
keyCode 131 = F20
keyCode 132 = F21
keyCode 133 = F22
keyCode 134 = F23
keyCode 135 = F24
keyCode 136 = Num_Lock
keyCode 137 = Scroll_Lock
keyCode 187 = acute grave
keyCode 188 = comma semicolon
keyCode 189 = minus underscore
keyCode 190 = period colon
keyCode 192 = numbersign apostrophe
keyCode 210 = plusminus hyphen macron
keyCode 211 =
keyCode 212 = copyright registered
keyCode 213 = guillemotleft guillemotright
keyCode 214 = masculine ordfeminine
keyCode 215 = ae AE
keyCode 216 = cent yen
keyCode 217 = questiondown exclamdown
keyCode 218 = onequarter onehalf threequarters
keyCode 220 = less greater bar
keyCode 221 = plus asterisk asciitilde
keyCode 227 = multiply division
keyCode 228 = acircumflex Acircumflex
keyCode 229 = ecircumflex Ecircumflex
keyCode 230 = icircumflex Icircumflex
keyCode 231 = ocircumflex Ocircumflex
keyCode 232 = ucircumflex Ucircumflex
keyCode 233 = ntilde Ntilde
keyCode 234 = yacute Yacute
keyCode 235 = oslash Ooblique
keyCode 236 = aring Aring
keyCode 237 = ccedilla Ccedilla
keyCode 238 = thorn THORN
keyCode 239 = eth ETH
keyCode 240 = diaeresis cedilla currency
keyCode 241 = agrave Agrave atilde Atilde
keyCode 242 = egrave Egrave
keyCode 243 = igrave Igrave
keyCode 244 = ograve Ograve otilde Otilde
keyCode 245 = ugrave Ugrave
keyCode 246 = adiaeresis Adiaeresis
keyCode 247 = ediaeresis Ediaeresis
keyCode 248 = idiaeresis Idiaeresis
keyCode 249 = odiaeresis Odiaeresis
keyCode 250 = udiaeresis Udiaeresis
keyCode 251 = ssharp question backslash
keyCode 252 = asciicircum degree
keyCode 253 = 3 sterling
keyCode 254 = Mode_switch

使用event对象的keyCode属性判断输入的键值

eg:

if(event.keyCode==13)alert("enter!");

键值对应表

A0X65  U 
0X85
B
0X66  V
 0X86
C
0X67  W
 0X87
D
0X68  X 
0X88
E
0X69  Y
 0X89
F
0X70  Z
 0X90
G
0X71  0
 0X48
H
0X72  1
 0X49
I
0X73  2
 0X50
J
0X74  3 
0X51
K
0X75  4 
0X52
L
0X76  5 
0X53
M
0X77  6
 0X54
N
0X78  7 
0X55
O
0X79  8 
0X56
P
0X80  9 
0X57
Q
0X81 ESC
0X1B
R
0X82 CTRL  0X11
S
0X83 SHIFT 0X10
T
0X84 ENTER 0XD

如果要使用组合键,则可以判断是否同时按下了这几个键,比如ctrl键、shift键以及alt键的组合使用就可以判断是否多按下了ctrl键、shift键以及alt键

js获取键盘事件:

<script type="text/javascript" language=JavaScript charset="UTF-8">
document.onkeydown=function(event){
  var e = event || window.event || arguments.callee.caller.arguments[0];
  if(e && e.keyCode==27){ // 按 Esc 
    //要做的事情
   }
  if(e && e.keyCode==113){ // 按 F2 
     //要做的事情
    }      
   if(e && e.keyCode==13){ // enter 键
     //要做的事情
  }
}; 
</script>

只要你定义了这些键的动作,你在浏览器里按下这些键就会响应,兼容目前所有浏览器。

JS判断键盘按键

window.document.onkeydown = disableRefresh;
function disableRefresh(evt){
evt = (evt) ? evt : window.event
if (evt.keyCode) {
  if(evt.keyCode == 116){
   //do something
  }
}
}

键码同上例所示。

使用event对象的keyCode属性判断输入的键值

eg:

if(event.keyCode==13){
var ieKey=event.keyCode;//获得键值,数字形式的
var realkey=String.fromCharCode(ieKey) //将数字形式的键值转化为真实的按键
alert(realkey);
}

键值对应表同上例所示

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
最简单的jQuery程序 入门者学习
Jul 09 Javascript
基于jquery的滚动新闻列表
Jun 19 Javascript
JavaScript Date对象 日期获取函数
Dec 19 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
js获取checkbox值的方法
Jan 28 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
Eclipse引入jquery报错如何解决
Dec 01 #Javascript
JS验证邮件地址格式方法小结
Dec 01 #Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 #Javascript
常见JS验证脚本汇总
Dec 01 #Javascript
详解JavaScript函数
Dec 01 #Javascript
javascript定义类和类的实现实例详解
Dec 01 #Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 #Javascript
You might like
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
九种原生js动画效果
2015/11/11 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
运动会入场词200字
2014/02/15 职场文书
食品工程专业求职信
2014/06/15 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android