键盘监听事件

最新更新时间：2019年1月10日17:36:59

《猛戳-查看我的博客地图-总有你意想不到的惊喜》

本文内容：键盘事件、键盘对象

键盘-键码值

按键	键码	键区
BackSpace	8	主键盘区
Tab	9	主键盘区
Shift	16	主键盘区
Ctrl	17	主键盘区
Alt	18	主键盘区
CapsLock	20	主键盘区
Esc	27	主键盘区
0	48	主键盘区
…	…	主键盘区
9	57	主键盘区
A	65	主键盘区
…	…	主键盘区
Z	90	主键盘区
0	96	小键盘区
…	…	小键盘区
9	105	小键盘区
*	106	小键盘区
+	107	小键盘区
Enter	108	小键盘区
-	109	小键盘区
.	110	小键盘区
/	111	小键盘区
F1	112	上键盘区
…	…	上键盘区
F12	123	上键盘区

原生事件

事件优先级：onkeydown > onkeypress > onkeyup

//全局监听-按下按键
document.onkeydown = function(e) {
	if ( e.keyCode === 65){ 
		console.log("A")
	} 
	if ( e.ctrlKey ||  e.keyCode === 17){ 
		console.log("Ctrl")
	} 
	if ( e.ctrlKey && e.keyCode === 67){ 
		console.log("Ctrl + C")
	} 
}; 
//全局监听-松开按键
document.onkeyup = function(e) {
	//do something
}; 
//全局监听-按下并松开按键
document.onkeydown = function(e) {
	//do something
}; 
//IE浏览器捕获事件对象用window.event，因此兼容性方案如下
document.onkeydown = function(e) {
	var e = e || window.event;
	//do something
}; 

获取键码转换为字符

document.onkeyup = function(e) {
	var e = e || window.event;
	var str = String.fromCharCode(e.keyCode)
	console.log(str)
};

按键对象event详解

key	value	解释
altKey	true/false	是否按下Alt键
charCode	0
code	“Numpad1” “ControlLeft” “F1” “Escape”	键名
ctrlKey	true/false	是否按下Ctrl键
key	1 “Control” “F1” “Escape”	键名
keyCode	97	键码
location	0/1/2/3	键盘区域
shiftKey	true/false	是否按下Shift键
type	“keydown”	是否按下Alt键
which	97	键码

感谢阅读，欢迎评论^-^

打赏我吧^-^