jQuery实现键盘回车搜索功能


Posted in jQuery onJuly 25, 2017

本来我一直认为一个搜索没有什么太难做的,直到我接到了上一个项目,让不使用按钮实现搜索这才让我开始在网上寻找这一技术,那么废话少说,将我的源码放上来给大家参考。

前台代码

<div class="fl search-box"> 
     <button type="button" name="btnSubmit" id="btnSubmit" class="btnSubmit">搜索</button>
     <input id="sousuo" name="sousuo" type="search" placeholder="输入搜索内容" value="">
</div>

搜索按钮实现

$(function () {
   $("body").on("click", "#btnSubmit", function () {
    var sousuo = $("#sousuo").val();
    if (sousuo == "") { alert("请输入信息"); return false; }
    location.href = "{$:CSSiteUrl}search.html?keywords=" + escape(sousuo);
   });
  });

下面也就是本次的重头戏,键盘回车实现搜索

$('#sousuo').bind('keypress', function (event) { 
   if (event.keyCode == "13") { 
    $("#btnSubmit").click();
   }
  })

或许大家可以发现,其实相当于在回车键event.keyCode == “13”,也就是说键盘的的第13个键码,那么借此帮助,以后想实现其他的按键的话,只要去查询键盘对应的键码就好了。

总结

以上所述是小编给大家介绍的jQuery实现键盘回车搜索功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
基于jquery实现多级菜单效果
Jul 25 #jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 #jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 #jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 #jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 #jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 #jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 #jQuery
You might like
正则表达式语法
2006/10/09 Javascript
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
javascript 树形导航菜单实例代码
2013/08/13 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
python使用PyGame模块播放声音的方法
2015/05/20 Python
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
mac系统安装Python3初体验
2018/01/02 Python
从0开始的Python学习016异常
2019/04/08 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
Python Selenium库的基本使用教程
2021/01/04 Python
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
如何手工释放资源
2013/12/15 面试题
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
2014年就业工作总结
2014/11/26 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python