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

本文实例讲述了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 则不区分小键盘和主键盘的数字字符。

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

测试范例

<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.jb51.net/code/HtmlJsRun测试上述代码,运行效果如下图所示:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

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

以上是 JavaScript键盘事件常见用法实例分析 的全部内容, 来源链接: utcz.com/z/323983.html

回到顶部