JavaScript監聽鍵盤事件,組合鍵事件
阿新 • • 發佈:2019-02-05
監聽鍵盤事件,比如說提交表單或者確認通過鍵盤操作會很方便,有時候需要組合鍵比如複製貼上等。基本原理是當按下某一個鍵時,返回對應的值,然後再判斷使用者按下了哪個鍵,進行對比。
一、鍵盤監聽是直接在整個頁面文件上進行監聽的,也就是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和回車');
}
});
按鍵所對應的值如下: