jquery鍵盤事件使用介紹,需要的朋友可以參考下。
一、首先需要知道的是:
1、keydown() keydown事件會在鍵盤按下時(shí)觸發(fā)
2、keyup()
keyup事件會在按鍵釋放時(shí)觸發(fā),也就是你按下鍵盤起來后的事件
3、keypress()
keypress事件會在敲擊按鍵時(shí)觸發(fā),我們可以理解為按下并抬起同一個(gè)按鍵
二、獲得鍵盤上對應(yīng)的ascII碼:
$(document).keydown(function(event){
console.log(event.keyCode);
});
tips: 上面例子中,event.keyCode就可以幫助我們獲取到我們按下了鍵盤上的什么按鍵,他返回的是ascII碼,比如說上下左右鍵,分別是38,40,37,39;
三、實(shí)例(當(dāng)按下鍵盤上的左右方面鍵時(shí))
$(document).keydown(function(event){
//判斷當(dāng)event.keyCode 為37時(shí)(即左方面鍵),執(zhí)行函數(shù)to_left();
//判斷當(dāng)event.keyCode 為39時(shí)(即右方面鍵),執(zhí)行函數(shù)to_right();
if(event.keyCode == 37){
//do somethings;
}else if (event.keyCode == 39){
//do somethings;
}
});
實(shí)例研究:
比如:小說網(wǎng)站中常見的按左右鍵來實(shí)現(xiàn)上一篇文章和下一篇文章;按ctrl+回車實(shí)現(xiàn)表單提交;google reader和有道閱讀中的全快捷鍵操作...(以此提高用戶體驗(yàn))
如果我們要實(shí)現(xiàn)ctrl+Enter就是ctrl+回車提交表單,可以這樣:
$(document).keypress(function(e) {
if (e.ctrlKey && e.which == 13)
$("form").submit();
})
//鍵盤操作
$(document).keydown(function(event){
var e = event || window.event;
var k = e.keyCode || e.which;
switch(k) {
case 37:
//…
break;
case 39:
//…
break;
}
return false;
})