js 键盘事件全面控制 兼容 FireFox 和 IE
主要分四个部分
第一部分:浏览器的按键事件
第二部分:兼容浏览器
第三部分:代码实现和优化
第四部分:总结
第一部分:浏览器的按键事件
用 js 实 现 键 盘 记 录 , 要 关 注 浏 览 器 的 三 种 按 键 事 件 类 型 , 即
keydown,keypress 和 keyup,它们分别对应 onkeydown、 onkeypress
和 onkeyup 这三个事件句柄。一个典型的按键会产生所有这三种事件,依次
是 keydown,keypress,然后是按键释放时候的 keyup。
在这 3 种事件类型中,keydown 和 keyup 比较底层,而 keypress 比较高级。
这里所谓的高级是指,当用户按下 shift + 1 时,keypress 是对这个按键事件
进行解析后返回一个可打印的“ !”字符,而 keydown 和 keyup 只是记录了
shift + 1 这个事件。[1]
但是 keypress 只能针对一些可以打印出来的字符有效,而对于功能按键,如
F1-F12、Backspace、Enter、Escape、 PageUP、PageDown 和箭头方
向等,就不会产生 keypress 事件,但是可以产生 keydown 和 keyup 事件。
然而在 FireFox 中,功能按键是可以产生 keypress 事件的。
传递给 keydown、keypress 和 keyup 事件句柄的事件对象有一些通用的属
性 。 如 果 Alt 、 Ctrl 或 Shift 和 一 个 按 键 一 起 按 下 , 这 通 过 事 件 的
altKey、ctrlKey 和 shiftKey 属性表示,这些属性在 FireFox 和 IE 中是通用
的。
第二部分:兼容浏览器
凡是涉及浏览器的 js,就都要考虑浏览器兼容的问题。
目前常用的浏览器主要有基于 IE 和基于 Mozilla 两大类。Maxthon 是基于 IE
内核的,而 FireFox 和 Opera 是基于 Mozilla 内核的。
2.1 事件的初始化
首先需要了解的是如何初始化该事件,基本语句如下:
function keyDown(){}
document.onkeydown = keyDown;
当浏览器读到这个语句时,无论按下键盘上的哪个键,都将呼叫 KeyDown()
函数。
评论2