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 相关文章推荐
学习ExtJS border布局
Oct 08 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
jQuery功能函数详解
Feb 01 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 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
一篇入门的php Class 文章
2007/04/04 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
js给selected添加options的方法
2015/05/06 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
原生js轮播特效
2017/05/18 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
小程序实现tab标签页
2020/11/16 Javascript
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
python提示No module named images的解决方法
2014/09/29 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
Django中Model的使用方法教程
2018/03/07 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
简述python Scrapy框架
2020/08/17 Python
关于.NET, HTML的五个问题
2012/08/29 面试题
2014优秀党员事迹材料
2014/08/14 职场文书
运动会广播稿200字
2014/10/18 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
社区低保工作总结2015
2015/07/23 职场文书
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA
服务器间如何实现文件共享
2022/05/20 Servers
python双向链表实例详解
2022/05/25 Python