在进入正题前，我们看一下浏览器对于键盘的一些默认事件，这有助于我们用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事件，连同上面的归纳如下：
- 如果表单里有一个type="submit"的按钮，回车键生效。
- 如果表单里只有一个type="text"的input，不管按钮是什么type，回车键生效。
- 如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。
- 其他表单元素如textarea、select不影响，radio checkbox不影响触发规则，但本身在FX下会响应回车键，在IE下不响应。
- 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对主副键盘的数字键敏感。
分享到：
相关推荐
在本文中，我们将深入探讨JavaScript键盘事件的测试总结，主要关注各种浏览器（如IE、Firefox、Safari和Opera）中的行为差异。 首先，键盘事件包括`keydown`、`keypress`、`input`和`keyup`。当用户按下键盘上的键...
一、原生JavaScript键盘事件 1. `keydown`事件：当用户按下键盘上的一个键时触发。 2. `keyup`事件：当用户释放键盘上的一个键时触发。 3. `keypress`事件：对于可打印字符，此事件在`keydown`之后、`keyup`之前...
本文主要总结了JavaScript事件的关键概念。 一、事件 事件是用户与浏览器之间交互的瞬间，例如用户点击按钮、输入文本或者鼠标移动等。JavaScript通过监听这些事件来执行相应的功能。常见的事件包括： 1. `onclick`...
实验报告详细介绍了JavaScript事件处理的相关知识...总结来说，这个实验旨在帮助学生理解和熟练运用JavaScript事件处理，提升Web交互的用户体验。通过实际操作，学生可以更好地掌握这些概念，并将其应用到实际项目中。
键盘事件 键盘事件 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]不过并不止提交按钮会激发form的submit事件，连同上面的归纳如下： 1. 如果表单里有一个type=”submit”的按钮，回车键生效。 2. 如果表单里...
标题中的"JavaScript事件学习小结（一）事件流"指的是JavaScript中的事件处理机制，特别是事件流的概念。事件流描述了在DOM（文档对象模型）中事件如何从根节点传播到具体的元素节点。在JavaScript中，事件是用户与...
这三个事件分别在键盘按键被按下、被持续按住以及释放时触发。它们是处理键盘输入的基础，可以用来捕捉用户的输入行为，如实现快捷键、游戏控制或文本输入限制。 ### 九、onload 页面加载完毕后触发`onload`事件。...
### JavaScript鼠标事件汇总详解 #### 一、基本概念与作用 在前端开发中，JavaScript（简称JS）作为主要的脚本语言，对于处理用户交互至关重要。鼠标事件是JS中最常见的一种事件类型，它能帮助开发者捕捉用户的...
### JavaScript 鼠标事件详解 #### 一、概述 JavaScript 的鼠标事件是网页交互设计中的重要组成部分，通过这些事件可以实现丰富的用户交互效果。在本文档中，我们将重点介绍几种常用的鼠标事件，并通过示例代码展示...
总结来说，用JavaScript实现软键盘是一项涉及JavaScript编程、CSS样式设计和HTML布局的综合任务。通过这样的软键盘，我们可以为用户提供一个安全且便捷的输入方式，尤其适用于移动设备或特定的安全应用场景。
在JavaScript的世界里，...总结，jQuery监听键盘事件是提升网页交互体验的重要手段，通过灵活运用`.on()`方法和事件处理函数，可以实现各种复杂的用户交互逻辑。了解并掌握这些技巧，将有助于提升你的前端开发能力。
JavaScript软键盘是一种在网页上实现用户输入的...总结，JavaScript软键盘是一种有效的提升在线安全和用户体验的技术。然而，开发者在设计和实现时需要考虑到其性能、可访问性和适用场景，以确保最佳的用户交互效果。
通过在ASP.NET页面中嵌入JavaScript代码，我们可以监听并处理键盘事件，利用`event.keyCode`获取按键的ASCII码，以此实现特定按键触发特定的功能。这不仅可以提高用户体验，也能增强Web应用的交互性。记住，虽然大...
1. 自定义脚本：开发者可以手动编写JavaScript代码，定义键盘布局、按键功能以及响应用户交互的事件处理函数。这种方法需要一定的JavaScript基础，但具有高度的灵活性和可定制性。 2. 使用现成的库：市面上存在许多...
在JavaScript中，事件可以分为鼠标事件、键盘事件、表单事件、DOM事件等多种类型。 二、鼠标事件 1. `click`：鼠标单击事件，常用于按钮点击等操作。 2. `dblclick`：鼠标双击事件，常用于放大图片等操作。 3. `...
除了上述方法外，JavaScript还提供了键盘事件监听机制，允许开发者在用户按下或释放键盘上的某个键时执行特定的代码。常用的键盘事件包括： - `keydown`：当用户按下键盘上的某个键时触发。 - `keyup`：当用户释放...
3. 键盘事件：JavaScript提供了`addEventListener`方法来监听键盘事件，如`keydown`。当用户按下键盘上的按键时，对应的事件处理函数会被调用，从而触发音符的播放。 4. 音频处理：HTML5引入了`Audio`对象，使得在...
键盘事件对象 `event` 包含了许多有用的信息，例如 `key` 属性表示按下或释放的键的名称，`keyCode` 属性表示按键的整数值，以及 `code` 属性表示物理按键的位置，不受键盘布局影响。这些属性可以帮助开发者处理各种...