JavaScript键盘事件常见用法实例分析


Posted in Javascript onJanuary 03, 2019

本文实例讲述了JavaScript键盘事件常见用法。分享给大家供大家参考,具体如下:

JavaScript 键盘事件有以下3种

keydown
键盘按键按下(如果按着不放,会持续触发该事件),可以捕获组合键。

keypress
键盘非功能按键按下(在keydown之后触发,如果按着不放会持续触发该事件),只能捕获单个键。

keyup
键盘按键弹起,可以捕获组合键。

全局事件对象event

event.ctrlKey
功能键”ctrl”键是否按下。

event.altKey
功能键”alt”键是否按下。

event.shiftKey
功能键”shift”键是否按下。

event.keyCode
键盘按键键码。

event.charCode
键盘非功能按键的ASCII值,可以用其区分大小写。

String.fromCharCode(event.charCode)
将ASCII值转化为对应的字符形式。

注意点

  • KeyDown触发后,不一定触发KeyUp。比如此时单击鼠标右键。
  • 其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。
  • KeyPress主要用来捕获数字(包括Shift+数字的符号)、字母(注意:包括大小写)、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符。
  • KeyDown 和 KeyUp 的keyCode区分小键盘和主键盘的数字字符。KeyPress 则不区分小键盘和主键盘的数字字符。

keyCode key
8 BackSpace BackSpace
9 Tab Tab
12 Clear
13 Enter
16 Shift_L
17 Control_L
18 Alt_L
19 Pause
20 Caps_Lock
27 Escape Escape
32 space space
33 Prior
34 Next
35 End
36 Home
37 Left
38 Up
39 Right
40 Down
41 Select
42 Print
43 Execute
45 Insert
46 Delete
47 Help
48 0 equal braceright
49 1 exclam onesuperior
50 2 quotedbl twosuperior
51 3 section threesuperior
52 4 dollar
53 5 percent
54 6 ampersand
55 7 slash braceleft
56 8 parenleft bracketleft
57 9 parenright bracketright
65 a A
66 b B
67 c C
68 d D
69 e E EuroSign
70 f F
71 g G
72 h H
73 i I
74 j J
75 k K
76 l L
77 m M mu
78 n N
79 o O
80 p P
81 q Q at
82 r R
83 s S
84 t T
85 u U
86 v V
87 w W
88 x X
89 y Y
90 z Z
96 KP_0 KP_0
97 KP_1 KP_1
98 KP_2 KP_2
99 KP_3 KP_3
100 KP_4 KP_4
101 KP_5 KP_5
102 KP_6 KP_6
103 KP_7 KP_7
104 KP_8 KP_8
105 KP_9 KP_9
106 KP_Multiply KP_Multiply
107 KP_Add KP_Add
108 KP_Separator KP_Separator
109 KP_Subtract KP_Subtract
110 KP_Decimal KP_Decimal
111 KP_Divide KP_Divide
112 F1
113 F2
114 F3
115 F4
116 F5
117 F6
118 F7
119 F8
120 F9
121 F10
122 F11
123 F12
124 F13
125 F14
126 F15
127 F16
128 F17
129 F18
130 F19
131 F20
132 F21
133 F22
134 F23
135 F24
136 Num_Lock
137 Scroll_Lock
187 acute grave
188 comma semicolon
189 minus underscore
190 period colon
192 numbersign apostrophe
210 plusminus hyphen macron
211
212 copyright registered
213 guillemotleft guillemotright
214 masculine ordfeminine
215 ae AE
216 cent yen
217 questiondown exclamdown
218 onequarter onehalf threequarters
220 less greater bar
221 plus asterisk asciitilde
227 multiply division
228 acircumflex Acircumflex
229 ecircumflex Ecircumflex
230 icircumflex Icircumflex
231 ocircumflex Ocircumflex
232 ucircumflex Ucircumflex
233 ntilde Ntilde
234 yacute Yacute
235 oslash Ooblique
236 aring Aring
237 ccedilla Ccedilla
238 thorn THORN
239 eth ETH
240 diaeresis cedilla currency
241 agrave Agrave atilde Atilde
242 egrave Egrave
243 igrave Igrave
244 ograve Ograve otilde Otilde
245 ugrave Ugrave
246 adiaeresis Adiaeresis
247 ediaeresis Ediaeresis
248 idiaeresis Idiaeresis
249 odiaeresis Odiaeresis
250 udiaeresis Udiaeresis
251 ssharp question backslash
252 asciicircum degree
253 3 sterling
254 Mode_switch

测试范例

<html>
  <body>
    <script type="text/javascript">
      function appendText(str) {
        document.body.innerHTML += (str+"<br/>");
      }
      document.onkeydown = function(){
        //如果长按的话,会持续触发keydown和keypress(如果有该事件的话)
        appendText("onkeydown");
        if(event.ctrlKey) {
          appendText("ctrlKey");
        }
        if(event.altKey) {
          appendText("altKey");
        }
        if(event.shiftKey) {
          appendText("shiftKey");
        }
        //无charCode属性,只有keypress才有该属性
        if(event.charCode) {
          appendText(String.fromCharCode(event.charCode));
        }
        if(event.keyCode) {
          appendText(event.keyCode);
        }
        //该语句只对chrome和edge有效,可以屏蔽keypress(只对chrome和edge浏览器有效)
        //event.returnValue = false;
      };
      document.onkeypress = function() {
        //keypress无法监听到组合键
        appendText("onkeypress");
        if(event.ctrlKey) {
          appendText("ctrlKey");
        }
        if(event.altKey) {
          appendText("altKey");
        }
        if(event.shiftKey) {
          appendText("shiftKey");
        }
        //charCode是字母的Unicode值
        if(event.charCode) {
          appendText(String.fromCharCode(event.charCode));
        }
      }
      document.onkeyup = function() {
        appendText("onkeyup");
      }
    </script>
  </body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,运行效果如下图所示:

JavaScript键盘事件常见用法实例分析

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 原型链学习总结
Oct 29 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
详解js类型判断
May 22 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
js中arguments对象的深入理解
May 14 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 #Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 #Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 #Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 #Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 #Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 #Javascript
发布一款npm包帮助理解npm的使用
Jan 03 #Javascript
You might like
thinkphp的c方法使用示例
2014/02/24 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
推荐一款jQuery插件模板
2015/01/09 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
解析Python编程中的包结构
2015/10/25 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
Python logging模块用法示例
2018/08/28 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
Python for i in range ()用法详解
2020/09/18 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
小学生自我鉴定
2013/10/12 职场文书
师范应届生语文教师求职信
2013/10/29 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
道歉情书大全
2015/05/12 职场文书
爱国主题班会教案
2015/08/14 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers