快捷導(dǎo)航

jquery鍵盤(pán)事件使用介紹

更新時(shí)間：2011年11月01日 20:25:09 作者：

jquery鍵盤(pán)事件使用介紹，需要的朋友可以參考下。

一、首先需要知道的是：
1、keydown()
keydown事件會(huì)在鍵盤(pán)按下時(shí)觸發(fā).
2、keyup()
keyup事件會(huì)在按鍵釋放時(shí)觸發(fā),也就是你按下鍵盤(pán)起來(lái)后的事件
3、keypress()
keypress事件會(huì)在敲擊按鍵時(shí)觸發(fā),我們可以理解為按下并抬起同一個(gè)按鍵
二、獲得鍵盤(pán)上對(duì)應(yīng)的ascII碼：

復(fù)制代碼代碼如下:

 
$(document).keydown(function(event){ 
console.log(event.keyCode); 
}); 

$tips: 上面例子中,event.keyCode就可以幫助我們獲取到我們按下了鍵盤(pán)上的什么按鍵,他返回的是ascII碼,比如說(shuō)上下左右鍵,分別是38,40,37,39；
三、實(shí)例（當(dāng)按下鍵盤(pán)上的左右方面鍵時(shí)）

復(fù)制代碼代碼如下:

 
$(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í)例研究：
比如：小說(shuō)網(wǎng)站中常見(jiàn)的按左右鍵來(lái)實(shí)現(xiàn)上一篇文章和下一篇文章；按ctrl+回車(chē)實(shí)現(xiàn)表單提交；google reader和有道閱讀中的全快捷鍵操作...（以此提高用戶(hù)體驗(yàn)）
如果我們要實(shí)現(xiàn)ctrl+Enter就是ctrl+回車(chē)提交表單，可以這樣：

復(fù)制代碼代碼如下:

 
$(document).keypress(function(e) { 
if (e.ctrlKey && e.which == 13) 
$("form").submit(); 
}) 
//鍵盤(pán)操作 
$(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; 
}) 