如何在JavaScript中使用键盘事件

如何在JavaScript中使用键盘事件?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

创新互联的客户来自各行各业,为了共同目标,我们在工作上密切配合,从创业型小企业到企事业单位,感谢他们对我们的要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。专业领域包括做网站、成都做网站、电商网站开发、微信营销、系统平台开发。

javascript是一种什么语言

javascript是一种动态类型、弱类型的语言,基于对象和事件驱动并具有相对安全性并广泛用于客户端网页开发的脚本语言,同时也是一种广泛用于客户端Web开发的脚本语言。它主要用来给HTML网页添加动态功能,现在JavaScript也可被用于网络服务器,如Node.js。

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 则不区分小键盘和主键盘的数字字符。

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

测试范例


  
    
      function appendText(str) {
        document.body.innerHTML += (str+"
");       }       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");       }        

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

如何在JavaScript中使用键盘事件

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。


标题名称:如何在JavaScript中使用键盘事件
文章起源:http://pwwzsj.com/article/pgidco.html