zoukankan      html  css  js  c++  java
  • js/jquery键盘事件及keycode大全

    js/jquery的键盘事件分为keypress、keydown和keyup事件

    一.键盘事件

    1.keydown()事件
    当按钮被按下时,发生 keydown 事件。

    2.keypress()事件
    keypress 当按钮被按下时,会发生该事件,我们可以理解为按下并抬起同一个按键。

    3.keyup事件
    keyup 事件会在按键释放时触发,也就是你按下键盘起来后的事件

    二.键盘对应的keycode大全
    字母和数字键的键码值(keyCode)
    按键 键码 按键 键码 按键 键码 按键 键码
    A 65 J 74 S 83 1 49
    B 66 K 75 T 84 2 50
    C 67 L 76 U 85 3 51
    D 68 M 77 V 86 4 52
    E 69 N 78 W 87 5 53
    F 70 O 79 X 88 6 54
    G 71 P 80 Y 89 7 55
    H 72 Q 81 Z 90 8 56
    I 73 R 82 0 48 9 57

    数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode)
    按键 键码 按键 键码 按键 键码 按键 键码
    0 96 8 104 F1 112 F7 118
    1 97 9 105 F2 113 F8 119
    2 98 * 106 F3 114 F9 120
    3 99 + 107 F4 115 F10 121
    4 100 Enter 108 F5 116 F11 122
    5 101 - 109 F6 117 F12 123
    6 102 . 110        
    7 103 / 111        

    控制键键码值(keyCode)
    按键 键码 按键 键码 按键 键码 按键 键码
    BackSpace 8 Esc 27 Right Arrow 39 -_ 189
    Tab 9 Spacebar 32 Down Arrow 40 .> 190
    Clear 12 Page Up 33 Insert 45 /? 191
    Enter 13 Page Down 34 Delete 46 `~ 192
    Shift 16 End 35 Num Lock 144 [{ 219
    Control 17 Home 36 ;: 186 /| 220
    Alt 18 Left Arrow 37 =+ 187 ]} 221
    Cape Lock 20 Up A

    三.代码实例

    1.获取按键对应的ascII码
    jquery代码:

    1 $(document).keydown(function(event){
    2     console.log("Key: "+event.keyCode);
    3     //或者
    4     //console.log("Key: " + event.which);
    5 });

    event.keyCode,event.which可以帮助我们获取到按下的是哪个键,返回的是ascII码,比如说上下左右键,分别是38,40,37,39,可以使用console.log(event)查看其它属性

    js代码:

     1 window.onload = function () {
     2 
     3     var keyCode;
     4     var isCtrl = false;
     5     document.onkeydown = function (e) {
     6         if (!keyCode) {
     7             if (window.event) {
     8                 keyCode = event.keyCode;
     9             } else if (e.which) {
    10                 keyCode = e.which;
    11             }
    12             if (keyCode === 17) {
    13                 isCtrl = true;
    14             }
    15             console.log("key1:" + keyCode+",isCtrl:"+isCtrl);
    16         }
    17     };
    18 
    19     document.onkeyup = function () {
    20         if (keyCode) {
    21             keyCode = undefined;
    22         }
    23     };
    24 }

    2.左右方向键事件

     1 $(document).keydown(function (event) {
     2     //判断当event.keyCode 为37时(即左方面键),执行函数to_left();
     3     //判断当event.keyCode 为39时(即右方面键),执行函数to_right();
     4     if (event.keyCode === 37) {
     5         console.log('按下了左方向键');
     6         //do somethings;
     7     } else if (event.keyCode === 39) {
     8         console.log('按下了右方向键');
     9         //do somethings;
    10     }
    11 });
    12 //或者
    13 $(document).keydown(function(event){
    14     var e = event || window.event;
    15     var k = e.keyCode || e.which;
    16     switch(k) {
    17         case 37:
    18             //do somethings;
    19             break;
    20         case 39:
    21             //do somethings;
    22             break;
    23     }
    24     return false;
    25 });


    应用场景:小说网站中常见的按左右键来实现上一篇文章和下一篇文章;按ctrl+回车实现表单提交;google reader和有道阅读中的全快捷键操作...(以此提高用户体验)

    实现ctrl+Enter提交表单,代码如下:

    1 $(document).keypress(function(e) {
    2     if (e.ctrlKey && e.which === 13){
    3         $("form").submit();
    4     }
    5 });

    3.组合按键

    常见组合按键类型:
    单独的按键操作,如:delete、up、down等
    两位组合建,如:ctrl(cmd)+ 其他按键,alt+其他按键,shift+其他按键
    三位组合键,如:ctrl(cmd)+ shift + 其他按键,Ctrl(cmd)+ alt + 其他按键

    上面这三种情况, 都要处理的一个关键问题是阻止默认行为:比如删除按键,保存网页按键,保存书签等等,这些网页上的默认行为都需要阻止掉。另外一个就是监听按键,然后根据自己的需求,处理相应的事件。

    步骤:
    第一阻止默认事件,在W3C标准和IE下,处理方式不太一致。分别是执行event.preventDefault()方法和将event.returnValue = false属性。当然如果你使用的jQuery等类库的话,只需要写一个event.preventDefault()就可以了,它帮你做到了兼容。
    第二监听按键类型,按键分两种情况,一种是单独按键(只有一个键),一种是组合键(两个以上按键)。单独按键需要监听事件的keyCode、charCode和which属性。

    当然使用了jQuery也不用担心兼容问题了,直接使用event.keyCode即可。那怎么知道用户使用了组合键呢?

    我们看到事件还有这么几个属性:ctrlKey(metaKey)、altKey、shiftKey,当你同时按下组合键的时候,这几个属性会变成true,所以组合键就可以通过监听按键code和这几个属性的状态进行判断了。

    举一个简单的例子,js监听ctrl(cmd)+ s事件:

     1 document.onkeydown = function(event) {
     2     var keyCode = event.keyCode || event.which || event.charCode;
     3     var ctrlKey = event.ctrlKey || event.metaKey;
     4     if(ctrlKey && keyCode === 83) {
     5         event.preventDefault();
     6         alert('save');
     7     }
     8     // event.preventDefault();
     9     // 注意:阻止默认事件不能放在外面,会阻止浏览器或者input/textarea的默认事件,应该放在相应的按键组合中去阻止
    10     return false;
    11 };

    JS监听组合按键的原理基本上就是这个样子了。

    当然GitHub上面也有封装好的插件shortcuts.js官网:http://openjs.com/scripts/events/keyboard_shortcuts/ ,还有一个jquery版本的:jquery.hotkeys,github地址:https://github.com/jeresig/jquery.hotkeys。

    shortcuts.js支持单独按键和组合按键,同时可以通过配置是组合按键在输入框内失效。
    它的使用方式是:

    1 shortcut("[",function() {
    2     alert("Hi there!");
    3 }, {
    4     'type':'keydown' //事件
    5     , 'propagate':false //是否支持冒泡
    6     , 'disable_in_input':true //是否在输入框内有效
    7     , 'target':document //作用范围
    8 });
  • 相关阅读:
    文本表征:SoW、BoW、TF-IDF、Hash Trick、doc2vec、DBoW、DM
    词表征 3:GloVe、fastText、评价词向量、重新训练词向量
    词表征 2:word2vec、CBoW、Skip-Gram、Negative Sampling、Hierarchical Softmax
    词表征 1:WordNet、0-1表征、共现矩阵、SVD
    机器学习基石笔记:Homework #4 Regularization&Validation相关习题
    机器学习基石笔记:16 Three Learning Principles
    [JavaEE] 了解Java连接池
    [JavaEE] Maven简介
    [MySQL] 按日期进行统计(前一天、本周、某一天)
    [MySQL] 按年度、季度、月度、周、日统计查询
  • 原文地址:https://www.cnblogs.com/zqifa/p/js-jquery-keyboard.html
Copyright © 2011-2022 走看看