脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript 键盘事件

javascript 键盘事件总结 推荐

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

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

不过并不止提交按钮会激发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 全选 注:引入外部Js需再刷新一下页面才能执行]

我们可以利用以下脚本来监听网页中的键盘事件，一旦用户按下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来判断对应的键是否被按下，因为它们都是返回一个布尔值。
您可能感兴趣的文章:

相关文章

  • 微信小程序入门之指南针

    微信小程序入门之指南针

    这篇文章主要为大家详细介绍了微信小程序入门之指南针，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • 详解如何替换项目中的if-else和switch

    详解如何替换项目中的if-else和switch

    这篇文章主要为大家介绍了详解如何替换项目中的if-else和switch，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • 详解JavaScript前端如何实现截屏功能

    详解JavaScript前端如何实现截屏功能

    这篇文章主要为大家详细介绍了JavaScript前端如何实现截屏功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • JS获取图片高度宽度的方法分享

    JS获取图片高度宽度的方法分享

    这篇文章主要介绍了JS获取图片高度宽度的方法，开始的时候没能做到兼容chrome，在度娘和众网友的帮助下，最终完成了完美兼容，这里分享给大家，有需要的小伙伴可以参考下。
    2015-04-04
  • 超详细JavaScript深浅拷贝的实现教程

    超详细JavaScript深浅拷贝的实现教程

    浅拷贝是指，一个新的对象对原始对象的属性值进行精确地拷贝；深拷贝是指，对于简单数据类型直接拷贝他的值，对于引用数据类型，在堆内存中开辟一块内存用于存放复制的对象，并把原有的对象类型数据拷贝过来。本文将实现JavaScript深浅拷贝，需要的可以参考一下
    2022-09-09
  • 实例详解JSON数据格式及json格式数据域字符串相互转换

    实例详解JSON数据格式及json格式数据域字符串相互转换

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式，这些特性使JSON成为理想的数据交换语言
    2016-01-01
  • d3.js中冷门却实用的内置函数总结

    d3.js中冷门却实用的内置函数总结

    D3.js是一个JavaScript库，它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。d3.js其实提供了很多内置的函数，可以却被大家忽略了，下面这篇文章就来给大家详细介绍了d3.js中冷门却实用的一些内置函数,需要的朋友可以参考借鉴。
    2017-02-02
  • JS实现光滑展开合拢的菜单效果代码

    JS实现光滑展开合拢的菜单效果代码

    这篇文章主要介绍了JS实现光滑展开合拢的菜单效果代码,涉及JavaScript响应鼠标事件遍历并改变页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • JavaScript接口的实现三种方式(推荐)

    JavaScript接口的实现三种方式(推荐)

    这篇文章主要介绍了JavaScript接口的实现三种方式，有注释法，检查属性法和鸭式辨行法，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-06-06
  • 鼠标放在图片上显示大图的JS代码

    鼠标放在图片上显示大图的JS代码

    将图片查询出来之后，还需要加一个查看大图的功能，于是就用js写了一个方法，然后在image的onmouseover事件中调用此方法，这样在鼠标悬浮在小图上面的时候，其大图就会自动的显示出来。
    2013-03-03

最新评论