jQuery處理鍵盤事件,比如小說網(wǎng)站中常見的按左右鍵來實(shí)現(xiàn)上一篇文章和下一篇文章,按ctrl+回車實(shí)現(xiàn)表單提交,google reader和有道閱讀中的全快捷鍵操作...
jQuery處理鍵盤事件有三個(gè)函數(shù),根據(jù)事件發(fā)生的順序分別是:
keydown(); keyup(); keypress();
keydown()
keydown事件會(huì)在鍵盤按下時(shí)觸發(fā),可以在綁定的函數(shù)中歐能夠返回false來防止觸發(fā)瀏覽器的默認(rèn)事件.
keyup()
keyup事件會(huì)在按鍵釋放時(shí)觸發(fā),也就是你按下鍵盤起來后的事件
keypress()
keypress事件會(huì)在敲擊按鍵時(shí)觸發(fā),我們可以理解為按下并抬起同一個(gè)按鍵
我們?cè)趺床拍塬@取我按下的是A還是Z還是回車按鈕呢?
鍵盤事件可以傳遞一個(gè)參數(shù)event,其實(shí)說有的jQuery事件函數(shù)中都可以傳遞這么一個(gè)參數(shù)
$('input').keydown(function(event){
alert(event.keyCode);
});
上面代碼中的,event.keyCode就可以幫助我們獲取到我們按下了什么按鍵,他返回的是ascII碼,比如說上下左右鍵,分別是38,40,37,39
如果我們要實(shí)現(xiàn)ctrl+Enter就是ctrl+回車提交表單
$(document).keypress(function(e) {
if (e.ctrlKey && e.which == 13)
$("form").submit();
})
通過上下鍵選擇
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
</head>
<script language = "javascript" type = "text/javascript">
function ShowSelectItem(divId) {
$("#hint div").css("background-color", "#ccc");
$("#" + divId).css("background-color", "#f00");
$("#search").val($("#" + divId).text());
//$('#hint').css('display','none')
$('#search').focus(function(){
$('#hint').css('display','block')
}).blur(function(){
$('#hint').css('display','none')
})
}
function SelectItemEvent() {
var items = $("#hint div");
var selected = 1; //默認(rèn)選第一個(gè)
ShowSelectItem(selected);
//捕捉鍵盤事件 上下左右分別為：38 40 37 39
$(document).keydown( function (event) {
if (event.keyCode == 38) { //按了上箭頭
selected--;
if (selected < 1) selected = 5;
ShowSelectItem(selected);
}
else if (event.keyCode == 40) { //按了下箭頭
selected++;
if(selected > 5) selected = 1;
ShowSelectItem(selected);
}
});
}
$(document).ready(function() {
SelectItemEvent();
});
</script>
<body>
<input type = "text" id = "search" onmousemove="showslect"/>
<div id= "hint" style ="width : 200px; border : solid 1px Black;">
<div id = "1">選項(xiàng)1</div>
<div id = "2">選項(xiàng)2</div>
<div id = "3">選項(xiàng)3</div>
<div id = "4">選項(xiàng)4</div>
<div id = "5">選項(xiàng)5</div>
</div>
</body>
</html>
聯(lián)系客服
