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代碼：

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

 

event.keyCode,event.which可以幫助我們獲取到按下的是哪個鍵,返回的是ascII碼,比如說上下左右鍵,分別是38,40,37,39，可以使用console.log(event)查看其它屬性

js代碼：

window.onload = function () {

    var keyCode;
    var isCtrl = false;
    document.onkeydown = function (e) {
        if (!keyCode) {
            if (window.event) {
                keyCode = event.keyCode;
            } else if (e.which) {
                keyCode = e.which;
            }
            if (keyCode === 17) {
                isCtrl = true;
            }
            console.log("key1：" + keyCode+",isCtrl："+isCtrl);
        }
    };

    document.onkeyup = function () {
        if (keyCode) {
            keyCode = undefined;
        }
    };
}

 

2.左右方向鍵事件

$(document).keydown(function (event) {
    //判斷當event.keyCode 為37時（即左方面鍵），執行函數to_left();
    //判斷當event.keyCode 為39時（即右方面鍵），執行函數to_right();
    if (event.keyCode === 37) {
        console.log('按下了左方向鍵');
        //do somethings;
    } else if (event.keyCode === 39) {
        console.log('按下了右方向鍵');
        //do somethings;
    }
});
//或者
$(document).keydown(function(event){
    var e = event || window.event;
    var k = e.keyCode || e.which;
    switch(k) {
        case 37:
            //do somethings;
            break;
        case 39:
            //do somethings;
            break;
    }
    return false;
});

 

應用場景：小說網站中常見的按左右鍵來實現上一篇文章和下一篇文章；按ctrl+回車實現表單提交；google reader和有道閱讀中的全快捷鍵操作...（以此提高用戶體驗）

實現ctrl+Enter提交表單，代碼如下：

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

 

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事件：

document.onkeydown = function(event) {
    var keyCode = event.keyCode || event.which || event.charCode;
    var ctrlKey = event.ctrlKey || event.metaKey;
    if(ctrlKey && keyCode === 83) {
        event.preventDefault();
        alert('save');
    }
    // event.preventDefault();
    // 注意：阻止默認事件不能放在外面，會阻止瀏覽器或者input/textarea的默認事件，應該放在相應的按鍵組合中去阻止
    return false;
};

 

JS監聽組合按鍵的原理基本上就是這個樣子了。

當然GitHub上面也有封裝好的插件shortcuts.js官網：http://openjs.com/scripts/events/keyboard_shortcuts/ ，還有一個jquery版本的：jquery.hotkeys，github地址：https://github.com/jeresig/jquery.hotkeys。

shortcuts.js支持單獨按鍵和組合按鍵，同時可以通過配置是組合按鍵在輸入框內失效。
它的使用方式是：

shortcut("[",function() {
    alert("Hi there!");
}, {
    'type':'keydown' //事件
    , 'propagate':false //是否支持冒泡
    , 'disable_in_input':true //是否在輸入框內有效
    , 'target':document //作用范圍
});