javascript 键盘事件总结
原文：http://www.cnblogs.com/rubylouvre/archive/2009/08/20/1550526.html#2583814
在进入正题前，我们看一下浏览器对于键盘的一些默认事件，这有助于我们用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对主副键盘的数字键敏感。
<!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键便开始你绑定的事件。
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来判断对应的键是否被按下，因为它们都是返回一个布尔值。
javascript 键盘事件总结的更多相关文章
- JavaScript键盘事件全面控制代码
JavaScript键盘事件全面控制,它可以捕获键盘事件的输入状态,可以判断你敲打了键盘的那个键,ctrl.shift,26个字母等等,返回具体键盘值. <html> <head&g ...
- day48—JavaScript键盘事件
转行学开发,代码100天——2018-05-03 今天继续学习JavaScript事件基础之键盘事件. 键盘代号获取 keyCode 键盘事件:onkeydown onkeyup 如通过键盘上下左右按 ...
- Javascript 键盘事件
window.document.onkeydown = function (e) { var evt = window.event || e;//兼容性处理 var keycode = evt.key ...
- JavaScript的事件对象_键盘事件
用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...
- javascript的键盘事件大全
javascript的键盘事件大全 ------------------------------------------------------------------- 使用event对象的keyC ...
- JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;
JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...
- JavaScript的事件对象中的特殊属性和方法（鼠标，键盘）
鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...
- JavaScript的事件的处理函数（鼠标，键盘，HTML）
事件处理函数概述 JavaScript 可以处理的事件类型为:鼠标事件.键盘事件.HTML 事件 所有的事件处理函数都会都有两个部分组成,on + 事件名称,例如 click 事件的事件处理函数就是: ...
- JavaScript onkeydown事件入门实例(键盘某个按键被按下)
JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...
随机推荐
- [转载]Android系统开机画面的实现
Android系统开机画面分为下面三个阶段: 1.开机图片:Android内核是基于标准内核的,对linux比较熟悉,特别是在开发板上移植过Linux系统的人就知道在内核引导过程中会显 示出一 个小企 ...
- SDUT 2603:Rescue The Princess
Rescue The Princess Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 Several days ago, a b ...
- A Simple Problem with Integers(树状数组HDU4267)
A Simple Problem with Integers Time Limit: 5000/1500 MS (Java/Others) Memory Limit: 32768/32768 K (J ...
- PIGS 分类： POJ 图论 2015-08-10 09:15 3人阅读 评论(0) 收藏
PIGS Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 18209 Accepted: 8277 Description Mir ...
- 基于clahe的图像去雾
基于clahe的图像去雾 通过阅读一些资料,我了解到clahe算法对图像去雾有所价值,正好opencv中有了实现,拿过来看一看. 但是现在实现的效果还是有所差异 #); clahe] ...
- Uva 12186 工人的请愿书
题目链接:https://uva.onlinejudge.org/external/121/12186.pdf 题意: 给出一个树状关系图,公司里只有一个老板编号为0,其他人员从1开始编号.除了老板, ...
- Windows上Python3.5安装Scrapy(lxml) 以及与twisted有关错误的解决
转载于:http://www.cnblogs.com/silverbullet11/p/4966608.html 常用网址: Python 3.5: https://www.python.org/do ...
- [转]VS2010几款超赞的扩展辅助工具总结
前言 前两天刚把公司电脑系统和开发环境的重新安装http://www.cnblogs.com/aehyok/p/3603149.html, 主要是由于公司电脑配置稍微低了一些,运行.调试太慢,又因为要 ...
- 利用Velocity结合Spring发email
在spring中发mail是一件容易的事,如果利用Velocity做mail的模板来发送就更得心应手了. 首先,还是简单描述sping中的配置,发mail需要一个mail的engin: <bea ...
- about_Execution_Policies
https://technet.microsoft.com/en-us/library/hh847748.aspx?f=255&MSPPError=-2147217396 在powershel ...