jQuery处理键盘事件,比如小说网站中常见的按左右键来实现上一篇文章和下一篇文章,按ctrl+回车实现表单提交,google reader和有道阅读中的全快捷键操作... jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: keydown(); keyup(); keypress(); keydown() keydown事件会在键盘按下时触发,可以在绑定的函数中欧能够返回false来防止触发浏览器的默认事件. keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 keypress() keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键 我们怎么才能获取我按下的是A还是Z还是回车按钮呢? 键盘事件可以传递一个参数event,其实说有的jQuery事件函数中都可以传递这么一个参数 $('input').keydown(function(event){ alert(event.keyCode); }); 上面代码中的,event.keyCode就可以帮助我们获取到我们按下了什么按键,他返回的是ascII码,比如说上下左右键,分别是38,40,37,39 如果我们要实现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>无标题文档</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; //默认选第一个 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" οnmοusemοve="showslect"/> <div id= "hint" style ="width : 200px; border : solid 1px Black;"> <div id = "1">选项1</div> <div id = "2">选项2</div> <div id = "3">选项3</div> <div id = "4">选项4</div> <div id = "5">选项5</div> </div> </body> </html> |