JavaScript如何实现监听键盘

2022-06-23 11:05:45

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" 键是否被按下。

《摘自W3CSchool》

这两个事件并不是用在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