1. 程式人生 > >JavaScript監聽鍵盤事件,組合鍵事件

JavaScript監聽鍵盤事件,組合鍵事件

監聽鍵盤事件,比如說提交表單或者確認通過鍵盤操作會很方便,有時候需要組合鍵比如複製貼上等。基本原理是當按下某一個鍵時,返回對應的值,然後再判斷使用者按下了哪個鍵,進行對比。

一、鍵盤監聽是直接在整個頁面文件上進行監聽的,也就是document上,以下是原生的使用案例:

1、某個鍵按下事件:onkeydown
2、某個鍵被按下或者按住:onkeypress
3、某個按下的鍵被鬆開:onkeyup

document.onkeydown=function(e){    //對整個頁面監聽  
var keyNum=window.event ? e.keyCode :e.which;       //獲取被按下的鍵值  
//判斷如果使用者按下了回車鍵(keycody=13) if(keyNum==13){ alert('您按下了回車'); } //判斷如果使用者按下了空格鍵(keycode=32), if(keyNum==32){ alert('您按下了空格'); } //判斷如果使用者按下了Shift鍵(keycode=32)和回車鍵(keycody=13) if (13 == e.keyCode && e.shiftKey){ alert('您按下了Shift和回車'); }

二、jquery監聽鍵盤事件
jquery的也分為三個過程,在事件名稱上有所不同
1、某個鍵盤的鍵被鬆開:keyup
2、某個鍵被按下:keydown
3、某個鍵盤的鍵被按下或按住:keypress

//判斷如果使用者按下了回車鍵(keycody=13)和判斷如果使用者按下了空格鍵(keycode=32),
$(document).keyup(function(e){  
    switch(e.keyCode) {  
        case 13:  
        alert('您按下了回車');  
        return;  
        case 32:  
        alert('您按下了空格');  
        return;  

    } 
});  

//判斷如果使用者按下了Shift鍵(keycode=32)和回車鍵(keycody=13) 
$(document).keyup(function(e){ if (13 == e.keyCode && e.shiftKey){ alert('您按下了Shift和回車'); } });

按鍵所對應的值如下:
這裡寫圖片描述
這裡寫圖片描述
這裡寫圖片描述
這裡寫圖片描述