jQuery處理鍵盤事件,比如小說(shuō)網(wǎng)站中常見(jiàn)的按左右鍵來(lái)實(shí)現(xiàn)上一篇文章和下一篇文章,按ctrl+回車實(shí)現(xiàn)表單提交,google reader和有道閱讀中的全快捷鍵操作...
本文講述jQuery處理按鍵的原理和方法
jQuery處理鍵盤事件有三個(gè)函數(shù),根據(jù)事件發(fā)生的順序分別是:
1 |
keydown(); |
2 |
keyup(); |
3 |
keypress(); |
keydown()
keydown事件會(huì)在鍵盤按下時(shí)觸發(fā),可以在綁定的函數(shù)中歐能夠返回false來(lái)防止觸發(fā)瀏覽器的默認(rèn)事件.
keyup()
keyup事件會(huì)在按鍵釋放時(shí)觸發(fā),也就是你按下鍵盤起來(lái)后的事件
keypress()
keypress事件會(huì)在敲擊按鍵時(shí)觸發(fā),我們可以理解為按下并抬起同一個(gè)按鍵
我們?cè)趺床拍塬@取我按下的是A還是Z還是回車按鈕呢?
鍵盤事件可以傳遞一個(gè)參數(shù)event,其實(shí)說(shuō)有的jQuery事件函數(shù)中都可以傳遞這么一個(gè)參數(shù)
1 |
$('input').keydown(function(event){ |
2 |
alert(event.keyCode); |
3 |
}); |
上面代碼中的,event.keyCode就可以幫助我們獲取到我們按下了什么按鍵,他返回的是ascII碼,比如說(shuō)上下左右鍵,分別是38,40,37,39
如果我們要實(shí)現(xiàn)ctrl+Enter就是ctrl+回車提交表單
1 |
$(document).keypress(function(e) { |
2 |
if (e.ctrlKey && e.which == 13) |
3 |
$("form").submit(); |
4 |
}) |
