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 则不区分小键盘和主键盘的数字字符。
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.jb51.net/code/HtmlJsRun测试上述代码，运行效果如下图所示：

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

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

赞 (0)

相关推荐

  • javascript中的event loop事件循环详解

    前言 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准? 为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是

  • JavaScript常见鼠标事件与用法分析

    JavaScript常见鼠标事件与用法分析

    本文实例讲述了JavaScript常见鼠标事件与用法.分享给大家供大家参考,具体如下: JavaScript 鼠标事件有以下8种 mousedown 鼠标的键钮被按下. mouseup 鼠标的键钮释放弹起. click 鼠标左键(或中键)被单击. 事件触发顺序是:mousedown -> mouseup -> click dblclick 鼠标左键(或中键)被双击. 事件触发顺序是:mousedown -> mouseup -> click -> mousedown ->

  • JS监听事件的叠加和移除功能

    html DOM元素有很多on开头的监听事件,如onload.onclick等,见DOM事件列表.但是同一种事件,后面注册的会覆盖前面的: window.onresize = function(){ alert(1); } window.onresize = function(){ alert(2); } // 改变窗口大小时,只会弹出2 addEventListener监听 利用addEventListener添加监听事件,可以重复添加,并不会互相覆盖: window.addEventList

  • Node.js EventEmmitter事件监听器用法实例分析

    本文实例讲述了Node.js EventEmmitter事件监听器用法.分享给大家供大家参考,具体如下: Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列. events 模块只提供了一个对象: events.EventEmitter.EventEmitter 的核心就是事件触发与事件监听器功能的封装. 该模块已被node.js默认引,不需要使用require()显示引入. EventEmitter 对象如果在实例化时发生错误,会触发 'error' 事件.当添加新的监

  • Javascript中绑定click事件的四种方式介绍

    一:HTML中添加onclick <button id="vv" onclick="myfunction()" >哈哈</button> 二:JS中定义函数绑定事件! var funcc = function () { alert('我爱编程') } var aa = document.getElementById('vv') aa.onclick = funcc 三:直接定义函数与内容 document.getElementById('vv

  • JavaScript事件对象深入详解

    本文实例讲述了JavaScript事件对象.分享给大家供大家参考,具体如下: 触发 DOM 上的事件时,会生成一个事件对象 event,它包含着所有与事件有关的信息,诸如导致事件的元素.事件的类型以及其他与特定事件相关的信息.所有的浏览器都支持 event 对象,但支持的方式不同. 1 DOM 中的事件对象 兼容 DOM 的浏览器会将 event 对象传入事件处理程序(DOM0 级与 DOM2 级都支持): var btn = document.getElementById("myBtn&quo

  • js中事件对象和事件委托的介绍

    js中事件对象和事件委托的介绍

    Ie9以下浏览器中的事件对象是放在全局中的window.event; 解决兼容性:event = event || window.event 事件委托(就是将事件绑定到父级/爷爷级对象上,通过事件对象的target属性来控制子级对象的改变): event.target(点击的目标对象) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • 浅谈Vue.js 中的 v-on 事件指令的使用

    v-on 事件指令用于绑定事件. 1 基础用法 v-on 指令绑定事件后,就会监听相应的事件. html: <div id="app"> <h3>已点击 {{count}} 次</h3> <button @click="count++">点我</button> </div> 注意: @click 是 v-on:click 的简写形式, @ 即表示 v-on: . js: <script&g

  • Node.js net模块功能及事件监听用法分析

    Node.js net模块功能及事件监听用法分析

    本文实例讲述了Node.js net模块功能及事件监听用法.分享给大家供大家参考,具体如下: net模块 对比C语言的网络编程,Node.js有更加简便的开发模式与模块提供.它就是net模块 在需要使用的时候只需要require("net")就可以引入模块了. var net = require("net"); 服务端编程 引入模块的前提下: 1. 创建一个新的TCP或IPC服务 var server = net.createServer(function(clie

  • JavaScript常用事件介绍

    JavaScript常用事件介绍

    JavaScript 事件(常用) 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件.比方说,我们可以在用户点击某按钮时产生一个onClick 事件来触发某个函数.事件在HTML 页面中定义. 事件举例: 鼠标点击 页面或图像载入 鼠标悬浮于页面的某个热点之上 在表单中选取输入框 确认表单 键盘按键 注意:事件通常与函数配合使用,当事件发生时函数才会执行. 事件三要素 事件源.事件.事件驱动程序. 三句话:获取事件源.绑定事件.书写事件驱动程序. 1.获取事件源:docu

随机推荐