jQuery绑定键盘事件

雪影工作室版权所有，转载请注明【http://blog.csdn.net/lina791211】

---

1、前言

        jQuery绑定各种键盘输入事件。

　　键值获取：http://blog.csdn.net/lina791211/article/details/36025571 

2、绑定回车键

        input输入框绑定回车响应（提交数据）

[html] view plain copy

print?

1. <span>   
2. <pre name="code" class="html" style="font-size: 18px; line-height: 26px;"><span style="font-family: Arial;"></span><pre name="code" class="html" style="font-size: 18px; line-height: 26px;">   <span style="font-family: Arial;"><input class="typeahead" type="text" id="textfield" placeholder="请输入搜索关键词" style="margin-top: 10px;width: 410px"></span>  

</span>

[html] view plain copy

print?

1. <span>  
2.     <button type="button" class="btn_search btn_search_primary" id="simpleSearchButton"  style="top:0;margin-top: -3px">搜   索</button>  
3. </span>  

[javascript] view plain copy

print?

1. /*监听输入框的回车操作*/  
2. $('#keyword').bind('keypress',function(event){  
3.     if(event.keyCode == "13") $('#simpleSearchButton').click();  
4. });  

3、button绑定click事件并提交数据

        

[javascript] view plain copy

print?

1. $('#simpleSearchButton').click(function(){  
2.     var _k = $('#textfield').val();  
3.     var url = '';  
4.     if(_k==null || _k==""){  
5.         //url = encodeURI('<%=path%>/');  
6.         return;  
7.     }else{  
8.         url = encodeURI('<%=path%>/search.jsp?keyword=' + _k);  
9.     }  
10.       
11.     url = encodeURI(url);  
12.     window.open(url,'_self');  
13. });  

4、页面绑定键盘左键、右键进行翻页

 

[html] view plain copy

print?

1. <div id="search_paging">  
2.     <div class="gigantic pagination">  
3.         <a href="#" class="first" data-action="first">?</a>  
4.         <a href="#" class="previous" data-action="previous">?</a>  
5.         <input class='current' id='c_page' type="text"  value="Page 10 of 10"/>  
6.         <a href="#" class="next" data-action="next">?</a>  
7.         <a href="#" class="last" data-action="last">?</a>  
8.     </div>  
9. </div>  

   

[javascript] view plain copy

print?

1.       /*监听键盘上左右键的点击*/  
2. $(document).keydown(function(event){  
3.    <span style="white-space:pre">     </span>if(event.which == "37") {  $(".previous").click(); return;}  
4.           <span style="white-space:pre">      </span>if(event.which == "39") {  $(".next").click(); return;}  
5. });