JavaScript 键盘事件与表单提交机制详解

表单Enter键提交行为与浏览器差异

在HTML表单中，Enter键通常触发submit操作，Esc键触发reset操作。但在IE6、Safari 4、Firefox 3.5、Opera 10及Chrome等浏览器中，按下Enter键不仅会触发form的submit事件，还会同时触发提交按钮的onclick事件，且触发顺序为：先执行提交按钮的onclick，再执行form的onsubmit。

<html dir="ltr" lang="zh-CN"> <head> <meta charset="gb2312"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>键盘事件</title> </head> <body> <h3>键盘事件</h3>  </body> </html>

除了提交按钮，其他表单元素也可能触发form的submit事件，具体规则如下所述。

1. 若表单中包含一个type="submit"的按钮，则按下Enter键会生效并提交表单。

2. 若表单中仅包含一个type="text"的input元素，无论按钮的type属性为何，按下Enter键均会生效。

3. 若使用button元素而非input，且未指定type属性，在IE浏览器中默认视为type="button"，而在Firefox中默认视为type="submit"。

4. 其他表单元素如textarea、select不影响触发规则，radio和checkbox也不影响触发规则。但在Firefox中，radio和checkbox本身会响应Enter键，而在IE中则不响应。

5. type="image"的input元素效果等同于type="submit"。尽管存在这种设计，但不推荐使用，建议通过CSS添加背景图来实现类似效果。

accesskey快捷键与语义化标签

除了按钮中绑定键盘事件外，浏览器还提供accesskey属性来指定链接的快捷键。需注意，若accesskey设置与浏览器菜单快捷键冲突，前者优先级更高。在IE中，快捷键为Alt+设置的键值；在Firefox中，为Alt+Shift+设置的键值。在IE中，a元素的accesskey仅将焦点转移至链接，并不等同于点击；而在Firefox中，则相当于直接点击。相比之下，input type=checkbox的accesskey在IE和Firefox中均表现为点击效果。此外，配合label标签使用可增强语义，个人强烈推荐此做法。

JavaScript键盘事件捕获机制

其余键盘事件需通过编程实现。JavaScript主要通过onkeydown、onkeypress和onkeyup三个事件来捕获键盘输入，其执行顺序为：onkeydown -> onkeypress -> onkeyup。一般情况下，使用这三种事件均可有效响应键盘输入，但在实际应用中，它们存在细微差别。

onkeypress事件无法正常响应系统功能键（如后退、删除等），且对中文输入法的支持有限；而onkeydown和onkeyup均能有效拦截系统功能键，只是截获位置不同，可根据具体需求选择合适的事件。

由于onkeypress无法捕获系统功能键，导致window.event对象的keyCode属性在onkeydown和onkeyup事件中获取的值与onkeypress不同。主要体现在：onkeypress的keyCode对字母大小写敏感，而onkeydown和onkeyup不敏感；onkeypress无法区分主键盘数字键与副键盘数字键，而onkeydown和onkeyup则能区分。

 <!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="gb2312"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>键盘事件</title> <style type="text/css"> td { text-align:center; } </style>  </head> <body> <h3>键盘事件</h3>  </body> </html> 

监听Enter键的JavaScript实现

我们可以利用以下脚本监听网页中的键盘事件，当用户按下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一览

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