当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 键盘事件总结 推荐

Javascript
jQuery中isFunction方法的BUG修复
将函数的实际参数转换成数组的方法
javascript 删除数组中重复项（uniq）
js 巧妙去除数组中的重复项
javascript下一种表单元素获取方法存在的问题
javascript 三种数组复制方法的性能对比
js 多层叠的TAB选项卡
javascript 自动标记来自搜索结果页的关键字
起点页面传值js,有空研究学习下
javascript 的Document属性和方法集合
JavaScript 使用简略语法创建对象的代码
使用JQuery进行跨域请求
jquery 经典动画菜单效果代码
jquery 常用操作方法
js提示信息jtip封装代码，可以是图片或文章
javascript面向对象的方式实现的弹出层效果代码
jquery中的sortable排序之后的保存状态的解决方法
js或css实现滚动广告的几种方案
使用JavaScript库还是自己写代码？
js 右键菜单，支持不同对象不同菜单(兼容IE、Firefox)

No. « 281 282 283 284 »

技术文章搜索

关键字

Javascript 中的 javascript 键盘事件总结 推荐

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-10   浏览: 241 ::
收藏到网摘: n/a

在进入正题前，我们看一下浏览器对于键盘的一些默认事件，这有助于我们用javascript截获键盘事件。 在form中， submit的快捷键是 enter，reset的快捷键是 esc。不过在IE6,safari4,ff3.5,opera10,chrome中，按Enter，不但激发form的submit事件，同时也会激发提交按钮的onclick，激发顺序为提交按钮的 onclick →　form 的 onsubmit。

[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

不过并不止提交按钮会激发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对主副键盘的数字键敏感。

[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

我们可以利用以下脚本来监听网页中的键盘事件，一旦用户按下Enter键便开始你绑定的事件。
复制代码 代码如下:

function getKey(e){
e = e || window.event;
var keycode = e.which ? e.which : e.keyCode;
if(keycode == 13 || keycode == 108){ //如果按下ENTER键
//在这里设置你想绑定的事件
}
}
// 把keyup事件绑定到document中
function listenKey ( ) {
if (document.addEventListener) {
document.addEventListener("keyup",getKey,false);
} else if (document.attachEvent) {
document.attachEvent("onkeyup",getKey);
} else {
document.onkeyup = getKey;
}
}

最后附上，键盘中所有按钮的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 Arrow 38 ,< 188 '" 222

另外我们还可以用event.altKey，event.ctrlKey，event.metaKey(上有微软的旗帜)，event.shiftKey来判断对应的键是否被按下，因为它们都是返回一个布尔值。