jQuery绑定键盘事件

作者:lina791211

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


1、前言

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

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


2、绑定回车键

        input输入框绑定回车响应(提交数据)

<span> 
<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>


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


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

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

        

		$('#simpleSearchButton').click(function(){
			var _k = $('#textfield').val();
			var url = '';
			if(_k==null || _k==""){
				//url = encodeURI('<%=path%>/');
				return;
			}else{
				url = encodeURI('<%=path%>/search.jsp?keyword=' + _k);
			}
			
			url = encodeURI(url);
			window.open(url,'_self');
		});

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

 

<div id="search_paging">
	<div class="gigantic pagination">
	    <a href="#" class="first" data-action="first">«</a>
	    <a href="#" class="previous" data-action="previous">‹</a>
	    <input class='current' id='c_page' type="text"  value="Page 10 of 10"/>
	    <a href="#" class="next" data-action="next">›</a>
	    <a href="#" class="last" data-action="last">»</a>
	</div>
</div>

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

  




发表评论

1个评论

  • u013047005

    感谢分享

    2016-07-30 23:14:11回复

我要留言×

技术领域:

我要留言×

留言成功,我们将在审核后加至投票列表中!

提示x

jQuery知识库已成功保存至我的图谱现在你可以用它来管理自己的知识内容了

删除图谱提示×

你保存在该图谱下的知识内容也会被删除,建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗?

删除节点提示×

无法删除该知识节点,因该节点下仍保存有相关知识内容!

删除节点提示×

你确定要删除该知识节点吗?