【JavaScript 教程】事件——键盘事件
作者 | 阮一峰
键盘事件的种类
键盘事件由用户击打键盘触发,主要有keydown
、keypress
、keyup
三个事件,它们都继承了KeyboardEvent
接口。
keydown
:按下键盘时触发。keypress
:按下有值的键时触发,即按下 Ctrl、Alt、Shift、Meta 这样无值的键,这个事件不会触发。对于有值的键,按下时先触发keydown
事件,再触发这个事件。keyup
:松开键盘时触发该事件。
如果用户一直按键不松开,就会连续触发键盘事件,触发的顺序如下。
keydown
keypress
keydown
keypress
...(重复以上过程)
keyup
KeyboardEvent 接口概述
KeyboardEvent
接口用来描述用户与键盘的互动。这个接口继承了Event
接口,并且定义了自己的实例属性和实例方法。
浏览器原生提供KeyboardEvent
构造函数,用来新建键盘事件的实例。
new KeyboardEvent(type, options)
KeyboardEvent
构造函数接受两个参数。第一个参数是字符串,表示事件类型;第二个参数是一个事件配置对象,该参数可选。除了Event
接口提供的属性,还可以配置以下字段,它们都是可选。
key
:字符串,当前按下的键,默认为空字符串。code
:字符串,表示当前按下的键的字符串形式,默认为空字符串。location
:整数,当前按下的键的位置,默认为0
。ctrlKey
:布尔值,是否按下 Ctrl 键,默认为false
。shiftKey
:布尔值,是否按下 Shift 键,默认为false
。altKey
:布尔值,是否按下 Alt 键,默认为false
。metaKey
:布尔值,是否按下 Meta 键,默认为false
。repeat
:布尔值,是否重复按键,默认为false
。
KeyboardEvent 的实例属性
KeyboardEvent.altKey,KeyboardEvent.metaKey.ctrlKey,KeyboardEvent.metaKey,KeyboardEvent.shiftKey
以下属性都是只读属性,返回一个布尔值,表示是否按下对应的键。
KeyboardEvent.altKey
:是否按下 Alt 键KeyboardEvent.ctrlKey
:是否按下 Ctrl 键KeyboardEvent.metaKey
:是否按下 meta 键(Mac 系统是一个四瓣的小花,Windows 系统是 windows 键)KeyboardEvent.shiftKey
:是否按下 Shift 键
下面是一个示例。
function showChar(e) {console.log('ALT: ' + e.altKey);console.log('CTRL: ' + e.ctrlKey);console.log('Meta: ' + e.metaKey);console.log('Shift: ' + e.shiftKey);
}document.body.addEventListener('keydown', showChar, false);
KeyboardEvent.code
KeyboardEvent.code
属性返回一个字符串,表示当前按下的键的字符串形式。该属性只读。
下面是一些常用键的字符串形式,其他键请查文档。
数字键0 - 9:返回
digital0
-digital9
字母键A - z:返回
KeyA
-KeyZ
功能键F1 - F12:返回
F1
-F12
方向键:返回
ArrowDown
、ArrowUp
、ArrowLeft
、ArrowRight
Alt 键:返回
AltLeft
或AltRight
Shift 键:返回
ShiftLeft
或ShiftRight
Ctrl 键:返回
ControlLeft
或ControlRight
KeyboardEvent.key
KeyboardEvent.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
。
KeyboardEvent.location
KeyboardEvent.location
属性返回一个整数,表示按下的键处在键盘的哪一个区域。它可能取以下值。
0:处在键盘的主区域,或者无法判断处于哪一个区域。
1:处在键盘的左侧,只适用那些有两个位置的键(比如 Ctrl 和 Shift 键)。
2:处在键盘的右侧,只适用那些有两个位置的键(比如 Ctrl 和 Shift 键)。
3:处在数字小键盘。
KeyboardEvent.repeat
KeyboardEvent.repeat
返回一个布尔值,代表该键是否被按着不放,以便判断是否重复这个键,即浏览器会持续触发keydown
和keypress
事件,直到用户松开手为止。
KeyboardEvent 的实例方法
KeyboardEvent.getModifierState()
KeyboardEvent.getModifierState()
方法返回一个布尔值,表示是否按下或激活指定的功能键。它的常用参数如下。
Alt
:Alt 键CapsLock
:大写锁定键Control
:Ctrl 键Meta
:Meta 键NumLock
:数字键盘开关键Shift
:Shift 键
if (event.getModifierState('Control') +event.getModifierState('Alt') +event.getModifierState('Meta') > 1
) {return;
}
上面代码表示,只要Control
、Alt
、Meta
里面,同时按下任意两个或两个以上的键就返回。
【JavaScript 教程】事件——键盘事件相关推荐
- javaScript+css+html——键盘事件(通过键盘上下左右控制图形位置)
该篇效果需要自己去试,测试的时候通过键盘上面的上下左右来控制图形的位置即可,可通过这个内容尝试做俄罗斯方块. 通过switch case语句控制所选方向. 效果图如下: 代码如下: <!DOCT ...
- JavaScript中常见键盘事件以及BOM中window常用对象
一,键盘事件 keypress键盘按下触发,但是不能识别crtl,shift方向键 keydown键盘按下触发,所有按键都支持,区别于keypress keyup键盘弹起触发 代码展示: docume ...
- python绑定按键pageup键_python游戏教程一——键盘事件
无论什么游戏,少不了输入设备,键盘鼠标可能应用的是最多的,当然除了他们还有游戏手柄或者其他.今天我们就一起来学习一下经常用到的鼠标和键盘事件. python当中经常用来做游戏的标准库为pygame,今 ...
- JavaScript中DOM键盘事件,使用键盘方向键控制图形的移动
注: 键盘事件onkeydown 按键按下如果按住按键不松,则该事件会连续触发当onkeydown连续触发时,第一次和第二次之间会间隔时间稍长,其他的会非常快这种设计是为了防止一些误操作onkeyup ...
- Vue : 事件处理(鼠标事件, 键盘事件)
一. 事件处理 事件的基本使用:1.使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名:2.事件的回调需要配置在methods对象中,最终会在vm上:3.methods中配置的函数,不要 ...
- HTML DOM 事件 —— 键盘事件 JS键盘事件
键盘事件 如果想实现快捷的页面操作,或者是一些前端的游戏,了解键盘事件很重要: onkeydown 某个键盘按键被按下 onkeypress 某个键盘按键被按下并松开 onkeyup 某个键盘按键被松 ...
- JavaScript的onkeypress键盘事件
定义和用法 onkeydown 事件会在键盘按键被按下并释放一个键时发生. 浏览器差异: Internet Explorer 使用 event.keyCode 取回被按下的字符,而 Netscape/ ...
- vue 指令 v-on 事件修饰符-键盘事件-键盘事件梳理
<body><div id="app">用户名:<input type="text" v-on:keyup.delete='cle ...
- JavaScript绑定键盘事件的多种写法
使用JavaScript来绑定键盘事件时,有多种写法,而他们的实现效果实际上是等价的,下面一一来列举. 方式一: function keyboard() {document.onkeydown = f ...
最新文章
- Spring复习笔记:3
- oracle 11g wm_concat 、 listagg 函数的使用(合并数据)
- 2018-3-18 中国计算机之母-- 夏培肃
- 3亿美元,腾讯第三次领投行业AI独角兽明略,这次还有淡马锡领投,快手跟投...
- 窗口截图(可指定HWND窗口句柄)
- 自然语言处理工具pyhanlp分词与词性标注
- 禅道 11.4.1 版本发布,主要优化细节
- Oracle数据导入要多久,oracle数据库备份导入要注意的几个问题
- 64位系统好不好用java_64位系统环境时Java的性能
- linux 设置ssh并发度,在linux如何使用ControlPersist加快SSH连接速度的问题
- 【学习笔记】结合代码理解设计模式 —— 代理模式(静态代理、动态代理、延伸)
- gridview获取选中行数据_Word转Excel,不想熬夜加班,那就掌握这个数据清洗方法...
- 《Python编程从入门到实践》记录之第2章 变量和简单数据类型总结(思维导图)
- Go语言潜力有目共睹,但它的Goroutine机制底层原理你了解吗?
- 中国最假的36句话(转自傲游论坛)
- linux内核命令行解析
- 一个好玩的小游戏(纯C语言编写)
- vfp保存为html,vfp向HTTP发送文件
- 图像处理算法 之 Hough变换
- 弥合银行业的数字鸿沟