DDR爱好者之家

JavaScript键盘事件常见用法实例分析
站长资源 2025/2/23 佚名
22 1538
DDR爱好者之家 Design By 杰米

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米