【jQuery】增加页面组合快捷键

    jQuery是个优雅的框架,可以方便地用js实现页面快捷键的功能,代码很简单

    $(document).keypress(function(e){
            if(e.ctrlKey && e.which == 13) { 
                     alert("You clicked Ctrl+Enter");
            } else if (e.shiftKey && e.which==13) {
                    alert("You clicked Shift+Enter"); 
           }  else if (e.altKey && e.which==65) {
                    alert("You clicked Alt+A"); 
           }      
    })



    另外,也可以借助jquery.hotkeys插件来完成,快捷键多且需要灵活增删时会比较方便,只是用下来有个问题,配合jQuery 3.4.2的时候按键事件会被重复触发,没去研究如何解决,有兴趣的同学可以和插件作者交流下。

    附:键盘键码表

    字母和数字键的键码值(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 Dw 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 Arrow 38 ,< 188 '" 222


    本博客所有文章如无特别注明均为原创。
    复制或转载请以超链接形式注明转自枫芸志,原文地址《【jQuery】增加页面组合快捷键
    标签:
    分享:

已经有2 条评论抢在你前面了~

  1. 沙发
    凡尘飞扬 2010年10月12日 下午10:12

    学习制作WebOS中,需要Win按键的键值。

    [回复]

    晴枫

    晴枫 回复:

    @凡尘飞扬, win键比较特殊,不知道能不能被检测到,可以做个测试

    [回复]

无觅相关文章插件,快速提升流量