DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery鍵盤事件使用介紹
jquery鍵盤事件使用介紹
編輯:JQuery特效代碼     

一、首先需要知道的是:
1、keydown()
keydown事件會在鍵盤按下時觸發.
2、keyup()
keyup事件會在按鍵釋放時觸發,也就是你按下鍵盤起來後的事件
3、keypress()
keypress事件會在敲擊按鍵時觸發,我們可以理解為按下並抬起同一個按鍵
二、獲得鍵盤上對應的ascII碼:
代碼如下:
$(document).keydown(function(event){
console.log(event.keyCode);
});

$tips: 上面例子中,event.keyCode就可以幫助我們獲取到我們按下了鍵盤上的什麼按鍵,他返回的是ascII碼,比如說上下左右鍵,分別是38,40,37,39;
三、實例(當按下鍵盤上的左右方面鍵時)
代碼如下:
$(document).keydown(function(event){
//判斷當event.keyCode 為37時(即左方面鍵),執行函數to_left();
//判斷當event.keyCode 為39時(即右方面鍵),執行函數to_right();
if(event.keyCode == 37){
//do somethings;
}else if (event.keyCode == 39){
//do somethings;
}
});

實例研究:
比如:小說網站中常見的按左右鍵來實現上一篇文章和下一篇文章;按ctrl+回車實現表單提交;google reader和有道閱讀中的全快捷鍵操作...(以此提高用戶體驗)
如果我們要實現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;
})

更詳盡的關於事件的總結和表述:http://www.jb51.net/article/28772.htm

w3school上的jQuery 事件參考手冊

學習過程中,應該多思考怎樣改善交互性和用戶體驗。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved