`
ariyue
  • 浏览: 337035 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

javascript 键盘事件大全(兼容性研究)

阅读更多
转载  javascript 键盘事件大全(兼容性研究) 收藏

本文转自:http://www.cnblogs.com/rubylouvre/archive/2009/08/20/1550526.html

在进入正题前,我们看一下浏览器对于键盘的一些默认事件,这有助于我们用javascript截获键盘事件。

在form中, submit的快捷键是 enter,reset的快捷键是 esc。不过在IE6,safari4,ff3.5,opera10,chrome中 ,按Enter,不但激发form的submit事件,同时也会激发提交按钮的onclick,激发顺序为提交按钮的 onclick → form 的 onsubmit。
<html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>键盘事件</title> </head> <body> <h3>键盘事件</h3> <form onsubmit="alert('Form is submiting');return false;"> <p><input type="text" value="将焦点聚焦于文本域中,然后按回车键或Esc键" /></p> <p><input type="submit" onclick="alert('submit button is clicked');" value="submit"/> <input type="reset" onclick="alert('reset button is clicked');" value="reset" /> </p> </form> </body> </html>

运行代码

不过并不止提交按钮会激发form的submit事件,连同上面的归纳如下:

   1. 如果表单里有一个type="submit"的按钮,回车键生效。
   2. 如果表单里只有一个type="text"的input,不管按钮是什么type,回车键生效。
   3. 如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit。
   4. 其他表单元素如textarea、select不影响,radio checkbox不影响触发规则,但本身在FX下会响应回车键,在IE下不响应。
   5. type="image"的input,效果等同于type="submit"。不知道为什么会设计这样一种type,不推荐使用,应该用CSS添加背景图合适些。

除了在按钮中绑定键盘事件外,浏览器还有一个accesskey 属性来指定链接的快捷键。注意 accesskey 的设置如果和浏览器的菜单相同,会优先于菜单。在IE中,快捷键是 alt + 设置的键值,FF是Alt+Shift+ 设置的键值。 在IE 中,a元素的 accesskey 只是使焦点转移到链接上,并不等同于点击,FF 中则相当于点击。与他对比的是,input type=checkbox 的 accesskey 效果不论在IE 还是 FF 中都是点击。另外,我们还可以配合label标签来加强语义,个人是十分推荐这种做法的。

剩下的就需要编程了。javascript事件主要通过以下三个事件来捕获键盘事件:onkeydown,onkeypress与onkeyup。该三个事件的执行顺序如下:onkeydown -> onkeypress ->onkeyup。在一般情况下,采用三种键盘事件均可对键盘输入进行有效的响应。当在实际使用中,会发现这几者有些不同的差别。

onkeypress事件不能对系统功能键(例如:后退、删除等,其中对中文输入法不能有效响应)进行正常的响应,onkeydown和onkeyup均可以对系统功能键进行有效的拦截,但事件截获的位置不同,可以根据具体的情况选择不同的键盘事件。

由于onkeypress不能对系统功能键进行捕获,导致window.event对象的keyCode属性和onkeydown,onkeyup 键盘事件中获取的keyCode属性不同,主要表现在onkeypress事件的keyCode对字母的大小写敏感,而onkeydown、 onkeyup事件不敏感;onkeypress事件的keyCode无法区分主键盘上的数字键和副键盘数字键的,而onkeydown、onkeyup 的keyCode对主副键盘的数字键敏感。
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>键盘事件</title> <style type="text/css"> td { text-align:center; } </style> <script type="text/javascript"> window.onload=function(){ document.onkeydown = showKeyDown document.onkeyup = showKeyUp document.onkeypress = showKeyPress } function showKeyDown(evt) { evt = (evt) ? evt : window.event document.getElementById("pressKeyCode").innerHTML = 0 document.getElementById("upKeyCode").innerHTML = 0 document.getElementById("pressCharCode").innerHTML = 0 document.getElementById("upCharCode").innerHTML = 0 restoreModifiers("") restoreModifiers("Down") restoreModifiers("Up") document.getElementById("downKeyCode").innerHTML = evt.keyCode if (evt.charCode) { document.getElementById("downCharCode").innerHTML = evt.charCode } showModifiers("Down", evt) } function showKeyUp(evt) { evt = (evt) ? evt : window.event document.getElementById("upKeyCode").innerHTML = evt.keyCode if (evt.charCode) { document.getElementById("upCharCode").innerHTML = evt.charCode } showModifiers("Up", evt) return false } function showKeyPress(evt) { evt = (evt) ? evt : window.event document.getElementById("pressKeyCode").innerHTML = evt.keyCode if (evt.charCode) { document.getElementById("pressCharCode").innerHTML = evt.charCode } showModifiers("", evt) return false } function showModifiers(ext, evt) { restoreModifiers(ext) if (evt.shiftKey) { document.getElementById("shift" + ext).style.backgroundColor = "#ff0000" } if (evt.ctrlKey) { document.getElementById("ctrl" + ext).style.backgroundColor = "#00ff00" } if (evt.altKey) { document.getElementById("alt" + ext).style.backgroundColor = "#0000ff" } } function restoreModifiers(ext) { document.getElementById("shift" + ext).style.backgroundColor = "#ffffff" document.getElementById("ctrl" + ext).style.backgroundColor = "#ffffff" document.getElementById("alt" + ext).style.backgroundColor = "#ffffff" } </script> </head> <body> <h3>键盘事件</h3> <form> <table border=1 cellpadding="2" cellspacing="0"> <tr> <th></th> <th>onKeyDown</th> <th>onKeyPress</th> <th>onKeyUp</th> </tr> <tr> <th>Key Codes</th> <td id="downKeyCode">0</td> <td id="pressKeyCode">0</td> <td id="upKeyCode">0</td> </tr> <tr> <th>Char Codes (IE5/Mac; NN6)</th> <td id="downCharCode">0</td> <td id="pressCharCode">0</td> <td id="upCharCode">0</td> </tr> <tr> <th rowspan="3">Modifier Keys</th> <td><span id="shiftdown">Shift</span></td> <td><span id="shift">Shift</span></td> <td><span id="shiftUp">Shift</span></td> </tr> <tr> <td><span id="ctrlDown">Ctrl</span></td> <td><span id="ctrl">Ctrl</span></td> <td><span id="ctrlUp">Ctrl</span></td> </tr> <tr> <td><span id="altdown">Alt</span></td> <td><span id="alt">Alt</span></td> <td><span id="altUp">Alt</span></td> </tr> </table> </form> </body> </html>

运行代码

我们可以利用以下脚本来监听网页中的键盘事件,一旦用户按下Enter键便开始你绑定的事件。
01. function getKey(e){
02.      e = e || window.event;
03.      var keycode = e.which ? e.which : e.keyCode;
04.      if (keycode == 13 || keycode == 108){ //如果按下ENTER键
05.         //在这里设置你想绑定的事件
06.      }
07. }
08. 
09. // 把keyup事件绑定到document中
10. function listenKey (  ) {
11.      if (document.addEventListener) {
12.          document.addEventListener( "keyup" ,getKey, false );
13.      } else if (document.attachEvent) {
14.          document.attachEvent( "onkeyup" ,getKey);
15.      } else {
16.          document.onkeyup = getKey;
17.      }
18. }

最后附上,键盘中所有按钮的keycode一览
字母和数字键的键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
A 65 J 74 S 83 1 49
B 66 K 75 T 84 2 50
C 67 L 76 U 85 3 51
D 68 M 77 V 86 4 52
E 69 N 78 W 87 5 53
F 70 O 79 X 88 6 54
G 71 P 80 Y 89 7 55
H 72 Q 81 Z 90 8 56
I 73 R 82 0 48 9 57
数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
0 96 8 104 F1 112 F7 118
1 97 9 105 F2 113 F8 119
2 98 * 106 F3 114 F9 120
3 99 + 107 F4 115 F10 121
4 100 Enter 108 F5 116 F11 122
5 101 - 109 F6 117 F12 123
6 102 . 110      
7 103 / 111      
控制键键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
BackSpace 8 Esc 27 Right Arrow 39 -_ 189
Tab 9 Spacebar 32 Down Arrow 40 .> 190
Clear 12 Page Up 33 Insert 45 /? 191
Enter 13 Page Down 34 Delete 46 `~ 192
Shift 16 End 35 Num Lock 144 [{ 219
Control 17 Home 36 ;: 186 \| 220
Alt 18 Left Arrow 37 =+ 187 ]} 221
Cape Lock 20 Up A
分享到:
评论

相关推荐

    【JavaScript源代码】JavaScript中BOM和DOM详解.docx

    JavaScript中BOM和DOM详解  目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 ...兼容性写法,封装工具  BOM(浏览器对象模型)  1. window 获取浏览器c窗口尺寸 2

    100个直接可以拿来用的JavaScript实用功能代码片段(1-10)

    61、原生JavaScript解决offsetX兼容性问题 62、原生JavaScript常用的正则表达式 63、原生JavaScript实现返回顶部的通用方法 64、原生JavaScript获得URL中GET参数值 65、原生JavaScript实现全选通用方法 66、原生...

    JavaScript权威指南(第6版)

    13.4 兼容性和互用性 13.5 可访问性 13.6 安全性 13.7 客户端框架 第14章 Window对象 14.1 计时器 14.2 浏览器定位和导航 14.3 浏览历史 14.4 浏览器和屏幕信息 14.5 对话框 14.6 错误处理 14.7 作为Window对象属性...

    JavaScript权威指南(第6版)中文版pdf+源代码

     13.4 兼容性和互用性326  13.5 可访问性333  13.6 安全性334  13.7 客户端框架339  第14章 Window对象341  14.1 计时器342  14.2 浏览器定位和导航343  14.3 浏览历史345  14.4 浏览器和屏幕信息346  ...

    JavaScript权威指南(第6版)(附源码)

    13.4 兼容性和互用性 13.5 可访问性 13.6 安全性 13.7 客户端框架 第14章 Window对象 14.1 计时器 14.2 浏览器定位和导航 14.3 浏览历史 14.4 浏览器和屏幕信息 14.5 对话框 14.6 错误处理 14.7 作为Window对象属性...

    JavaScript权威指南(第6版)(中文版)

    13.4 兼容性和互用性 13.5 可访问性 13.6 安全性 13.7 客户端框架 第14章 Window对象 14.1 计时器 14.2 浏览器定位和导航 14.3 浏览历史 14.4 浏览器和屏幕信息 14.5 对话框 14.6 错误处理 14.7 作为Window对象属性...

    JavaScript 权威指南(第四版).pdf

     13.4 兼容性和互用性326  13.5 可访问性333  13.6 安全性334  13.7 客户端框架339  第14章 Window对象341  14.1 计时器342  14.2 浏览器定位和导航343  14.3 浏览历史345  14.4 浏览器和屏幕信息346  ...

    JavaScript权威指南(第6版)中文文字版

    13.4 兼容性和互用性 326 13.5 可访问性 333 13.6 安全性 334 13.7 客户端框架 339 第14章 window对象 341 14.1 计时器 342 14.2 浏览器定位和导航 343 14.3 浏览历史 345 14.4 浏览器和屏幕信息 346 14.5 对话框 ...

    JavaScript权威指南(第六版) 清晰-完整

    13.4 兼容性和互用性 13.5 可访问性 13.6 安全性 13.7 客户端框架 第14章 Window对象 14.1 计时器 14.2 浏览器定位和导航 14.3 浏览历史 14.4 浏览器和屏幕信息 14.5 对话框 14.6 错误处理 14.7 作为Window对象属性...

    JavaScript权威指南(第6版)

    13.4 兼容性和互用性 326 13.5 可访问性 333 13.6 安全性 334 13.7 客户端框架 339 第14章 window对象 341 14.1 计时器 342 14.2 浏览器定位和导航 343 14.3 浏览历史 345 14.4 浏览器和屏幕信息 346 14.5 对话框 ...

    JavaScript权威指南(第6版) 中文版

    13.4 兼容性和互用性 326 13.5 可访问性 333 13.6 安全性 334 13.7 客户端框架 339 第14章 window对象 341 14.1 计时器 342 14.2 浏览器定位和导航 343 14.3 浏览历史 345 14.4 浏览器和屏幕信息 346 14.5 对话框 ...

    react-keyboard-event-handler:一个用于处理键盘事件的React组件

    提供易于使用且一致的键名,使您无需处理数字键代码和/或浏览器兼容性; 支持诸如“字母数字”和“全部”之类的密钥别名,作为处理多个密钥的快捷方式; 支持多个处理程序实例,并提供了一种通过props isDisabled和...

    JS-Emoji键盘:一个简单的Vanilla-JavaScript emoji键盘

    使用的每个类和ID都以emojikb-为前缀,因此您应该没有任何兼容性问题。 example.html文件中提供了一个基本用法示例。 欢迎对此项目做出任何贡献。 还有很多改进的空间,例如表情符号的缓存。

    计算器键盘监听.zip

    兼容性: Google Chrome 浏览器完美运行 Microsoft Edge 浏览器完美运行 Mozilla Firefox 浏览器组合键不兼容(大键盘 如: shift+ =+ 无法显示+号) 其他浏览器 未测试 适用人群:学生、JavaScript学习者 键盘输入

    js和jquery实现监听键盘事件示例代码

    查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox、Chrome、IE中均可以使用。 一、使用javascript实现 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt...

    JS网页软键盘示例下载.rar

    JS网页软键盘示例下载,用在网页上的虚拟键盘效果,在一些安全支付场合中很有必要软键盘的功能,本JS虚拟键盘来自国外JavaScript达人所创作,兼容性良好,软键盘操作舒服,在IE8下完美运行。

    KioskBoard:KioskBoard-虚拟键盘-使用虚拟键盘的纯JavaScript库

    浏览器兼容性 Chrome - Firefox - Safari - Opera - Edge - IE 11 (A)安装和导入 安装 npm i kioskboard yarn add kioskboard 进口 import KioskBoard from "kioskboard" ; (B)添加到HTML文档 CSS和JS &lt; ...

    ember-keyboard:一个Ember.js插件,可轻松支持键盘事件

    兼容性ember-keyboard 6.x需要Ember 3.8或更高版本,并且与Internet Explorer不兼容要与最高3.8的Ember 2.0或IE兼容使用,请使用ember-keyboard5.x。 Node.js v10或更高版本(快速启动需要Node v14 +)辅助功能注意...

Global site tag (gtag.js) - Google Analytics