键盘事件
键盘事件由用户击打键盘触发
- 主要有 keydown、keyup 、keypress三个事件,它们都继承了 KeyboardEvent 接口。
- keydown 按下键时 触发
- keyup 松开键时 触发
- keypress 按下有值的键时 触发
即按下 Ctrl、Alt、Shift、Meta 这样无值的键,这个事件不会触发。
对于有值的键,按下时先触发 keydown 事件,再触发这个事件。
- 如果用户按下 不放时,就会连续触发键盘事件
keydown
keypress
keydown
keypress
...(重复以上过程)
终于松开了 keyup- KeyboardEvent 接口
描述用户与键盘的互动。
这个接口继承了 Event 接口,并且定义了自己的实例属性和实例方法
- 浏览器原生提供 KeyboardEvent 构造函数
用来新建键盘事件的实例
var keyEvent = new KeyboardEvent(type, options)
第一个参数是字符串,表示事件类型;
第二个参数是一个事件配置对象,该参数可选。
除了 Event
接口提供的属性,还可以配置以下字段,它们都是可选的
key 字符串 当前按下的键,默认为空字符串。
code 字符串 表示当前按下的键的字符串形式,默认为空字符串。
location 整数 当前按下的键的位置,默认为0。
ctrlKey 布尔值 是否按下 Ctrl 键,默认为false。
shiftKey 布尔值 是否按下 Shift 键,默认为false。
altKey 布尔值 是否按下 Alt 键,默认为false。
metaKey 布尔值 是否按下 Meta 键,默认为false。
repeat 布尔值 是否重复按键,默认为false- KeyboardEvent 的实例属性
event.altKey 是否按下 Alt 键
event.ctrlKey 是否按下 Ctrl 键
event.metaKey 是否按下 meta 键(Mac 系统是一个四瓣的小花,Windows 系统是 windows 键)
event.shiftKey 是否按下 Shift 键
function showChar(e) {
console.log('ALT: ' + e.altKey);
console.log('CTRL: ' + e.ctrlKey);
console.log('Meta: ' + e.metaKey);
console.log('Meta: ' + e.shiftKey);
}; document.body.addEventListener('keydown', showChar, false);
event.code 返回一个字符串
表示当前按下的键的字符串形式。
该属性只读。
下面是一些常用键的字符串形式,其他键请查文档
数字键0 - 9 返回 digital0 - digital9
字母键A - z 返回 KeyA - KeyZ
功能键F1 - F12 返回 F1 - F12
方向键 返回 ArrowDown、ArrowUp、ArrowLeft、ArrowRight
Alt 键 返回 AltLeft 或 AltRight
Shift 键 返回 ShiftLeft 或 ShiftRight
Ctrl 键 返回 ControLeft 或 ControlRight
event.key 返回一个字符串
表示按下的键名。
该属性只读。
如果按下的键代表可打印字符,则返回这个字符,比如数字、字母
如果按下的键代表不可打印的特殊字符,则返回预定义的键值,
比如 Backspace,Tab,Enter,Shift,Control,Alt,CapsLock,
Esc,Spacebar,PageUp,PageDown,End,Home,Left,
Right,Up,Down,PrintScreen,Insert,Del,Win,F1~F12,
NumLock,Scroll 等
如果同时按下一个 控制键 和一个 符号键 ,则返回符号键的键名。比如,按下 Ctrl + a,则返回a;按下 Shift + a,则返回大写的 A
如果无法识别键名,返回字符串 "Unidentified"
event.location 返回一个整数,
表示按下的键处在键盘的哪一个区域。
0 键盘的主区域,或者无法判断处于哪一个区域。
1 键盘的左侧,只适用那些有两个位置的键(比如 Ctrl 和 Shift 键)。
2 键盘的右侧,只适用那些有两个位置的键(比如 Ctrl 和 Shift 键)。
3 数字小键盘。
event.repeat 返回一个布尔值
代表该键是否被按着不放,以便判断是否重复这个键
即浏览器会持续触发 keydown 和 keypress 事件,直到用户松开手为止
- event.getModifierState() 返回一个布尔值
表示是否按下或激活指定的功能键
-
Alt Alt 键
CapsLock 大写锁定键
Control Ctrl 键
Meta Meta 键
NumLock 数字键盘开关键
Shift Shift 键 if ( event.getModifierState('Control') +
event.getModifierState('Alt') +
event.getModifierState('Meta') > 1){ //只要Control、Alt、Meta里面,同时按下任意两个或两个以上的键就返回
return;
}