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

站长资源 2024/11/25 佚名

22 1538 22

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操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

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

JavaScript,键盘事件

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“JavaScript键盘事件常见用法实例分析”

暂无评论...

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

原生javascript实现连连看游戏

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

评论“JavaScript键盘事件常见用法实例分析”

更新日志

友情链接