当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript键盘事件常见用法实例分析

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

2019年01月07日  | 移动技术网IT编程  | 我要评论

本文实例讲述了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代码运行工具：测试上述代码，运行效果如下图所示：

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网