JavaScript中监听键盘似乎特别简单,可惜还需要考虑浏览器的兼容性问题:
键盘监听是一个事件,JavaScript常用(还有别的)的能监听到三种键盘动作,分别是:
onkeydown | 某个键盘按键被按下。 |
onkeypress | 某个键盘按键被按下并松开。 |
onkeyup | 某个键盘按键被松开。 |
(摘自W3CSchool)
当页面中有相应的监听器,并且对应的动作发生时,JavaScript事件就会被激活;
如何使用键盘监听事件?请看下面代码:
<html>
<head></head>
<body οnkeypress=""></body>
</html>
通过设置标签的属性,就可以在标签里植入一个监听事件,这里是植入到body标签里面;
键盘监听事件还支持以下所有的标签:
支持该事件的 HTML 标签:(摘自W3CSchool)
<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>
那么,不同的标签植入事件,有何不同效果呢?
其实就是监听的范围不一样,这里的范围指的是鼠标点击过的范围;
例如,<body οnkeypress="">的范围就是全部的显示范围,但是你必须先点击一下;
而<input type="text" οnkeypress="">的范围就仅限于该输入框内,当然,你还是需要点击一下输入框,否则也没有启动监听事件;
JavaScript三个监听事件有什么不同呢?这里引用了一段说明:
KeyDown:在控件有焦点的情况下按下键时发生。
KeyPress:在控件有焦点的情况下按下键时发生。
KeyUp:在控件有焦点的情况下释放键时发生。
1、KeyPress主要用来接收字母、数字等ANSI字符
KeyDown 和 KeyUP 事件过程通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键)
2、KeyPress 只能捕获单个字符,KeyDown 和KeyUp 可以捕获组合键。
3、KeyPress 不显示键盘的物理状态(SHIFT键),而只是传递一个字符。
KeyPress 将每个字符的大、小写形式作为不同的键代码解释,即作为两种不同的字符。
4、KeyDown 和KeyUp 不能判断键值字母的大小。
KeyDown 和 KeyUp 用两种参数解释每个字符的大写形式和小写形式:
keycode — 显示物理的键(将 A 和 a 作为同一个键返回)和 shift —指示
shift + key 键的状态而且返回 A 或 a 其中之一。
5、KeyPress 不区分小键盘和主键盘的数字字符。
KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。
6、KeyDown、KeyUp事件是当按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的。
由于一般按下键盘的键往往会立即放开(这和鼠标不同),所以这两个事件使用哪个差别不大。
而且,up和其他两者还有一个区别:要判断key修改后的状态必须用up。
监听事件只是激活事件,如果我们要读取到它的值,还需要我们调用函数,这里就涉及到了浏览器兼容问题;
Internet Explorer 使用 event.keyCode 取回被按下的字符,而 Netscape/Firefox/Opera 使用 event.which。
W3CSchoole提供了一个方法,解决兼容问题:
function getKeyCode(e) {
var keynum;
var keychar;
var numcheck;
if (window.event){ // IE
keynum = e.keyCode;
} else if (e.which){ // Netscape/Firefox/Opera
keynum = e.which;
}
keychar = String.fromCharCode(keynum);
alert(keychar+":"+keynum);
}
这里通过对window.event进行判断,如果返回为null(JavaScript中null可以当作false用),就表示当前浏览器不支持IE
反之,就表示当前浏览器是IE浏览器;
e.keyCode 或 e.which取回的是什么呢?
是键盘上对应的字符的unicode值;
也就是说,当你按下"A""键,你得到的是"97",也就是"a"的unicode值;
如果你按下“shift+A"键,你得到的是"65",这才是“A"的unicode值;
如果你按下的是”Enter“回车,你得到是"13",退格键是"8",空格是"32";
值得一提的是,如果单独的按一下"Shift"、"Caps Lock"、"Tab"、"Ctrl"、"Alt"、"F1"-"F12"、功能键上的"Delete"、"Insert"、"Home"、"End"、"PageUp"、"PageDown"等键,是不会激发键盘监听事件(onKeyPress);
那么如果你的确需要监听到"Shift"、"Alt"键怎么办?
onKeyDown事件与onKeyUp事件,可以监听到除PrScrn所有按键(这里不讨论特殊键盘的特殊键),另外,也可以使用下面的键盘监听事件,比如:
altKey | 返回当事件被触发时,"ALT" 是否被按下。 |
shiftKey | 返回当事件被触发时,"SHIFT" 键是否被按下。 |
这两个事件并不是用在html标签中,而是用在js函数中,也就是在别的事件被激活后,用来检验当前事件中是否按到了Alt或Shift;
下面的例子可提示当鼠标按键被点击时 "SHIFT" 键是否被按住:
<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.shiftKey==1
)
{
alert("The shift key was pressed!")
}
else
{
alert("The shift key was NOT pressed!")
}
}
</script>
</head>
<body οnmοusedοwn="isKeyPressed(event)">
<p>Click somewhere in the document.
An alert box will tell you if you
pressed the shift key or not.</p>
</body>
</html>
对于一些需求来说,获得一个键的Unicode值意义不大,我们会希望得到一个字符的话,就需要调用String里面的fromCharCode()方法,
String.fromCharCode()
这个方法,能使Unicode以字符形式输出;
当然很多时候,我们也不需要转换形式,只需要对比一下,那么自然无需多此一举;
附录:[原创链接]Javascript的 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 |