很多時候，我們需要獲取用戶的鍵盤事件，下面就一起來看看jquery是如何操作鍵盤事件的。

一、首先需要知道的是：

1、keydown()

???? keydown事件會在鍵盤按下時觸發.

2、keyup()

???? keyup事件會在按鍵釋放時觸發,也就是你按下鍵盤起來后的事件

3、keypress()

???? keypress事件會在敲擊按鍵時觸發,我們可以理解為按下并抬起同一個按鍵

二、獲得鍵盤上對應的ascII碼：

?

1 2 3

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

$tips:?上面例子中,event.keyCode就可以幫助我們獲取到我們按下了鍵盤上的什么按鍵,他返回的是ascII碼,比如說上下左右鍵,分別是38,40,37,39；

?

三、實例（當按下鍵盤上的左右方面鍵時）

?

1 2 3 4 5 6 7 8 9 10 11 12 13

$(document).keydown(function(event){ ????//判斷當event.keyCode 為37時（即左方面鍵），執行函數to_left(); ????//判斷當event.keyCode 為39時（即右方面鍵），執行函數to_right(); ????if(event.keyCode == 37){ ???????//do something; ????}else if (event.keyCode == 39){ ???????//do something; ????} });

?

實例研究：

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

?

① 實現ctrl+Enter就是ctrl+回車提交表單：

?

1 2 3 4 5 6 7

$(document).keypress(function(event) { ??????if (event.ctrlKey && event.which == 13) ?????$("form:first").trigger("submit"); ?})

② 監測ctrl按鍵：

?

?

1 2 3 4 5 6 7 8 9

$(document).keydown(function(event){ ???????//（ctrlKey和metaKey等效：都是監測）按下ctrl返回turn，按下非ctrl鍵返回false； ???????console.log(event.ctrlKey); ???????//console.log(event.metaKey);????????? })

③ 鍵盤系列操作

?

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

$(document).keydown(function(event){? ????var e = event || window.event;???? //作用？？？ ????var k = e.keyCode || e.which;? //獲取按鍵的acdII 碼 ????switch(k) { ???????case 37: ???????????//… ???????????break; ???????case 39: ???????????//… ???????????break; ????} ????return false; })

1 2 3 4 5 6 7 8 9 10 11

//另外發現一個應用的方法：當頁面轉載完成的時候，第一個表單元素獲得焦點，以便輸入 $("input[type=text]:first").trigger("focus");???? //當表單沒獲得焦點，但用戶卻按下鍵盤的時候，自動為用戶定位焦點到輸入框上 $(document).keydown(function(){ ???????$("input[type=text]:first").trigger("focus"); })

以上是列出了jquery鍵盤事件的常用方法，很多時候應該也夠用了。

總結

以上是生活随笔為你收集整理的jquery键盘事件全记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。