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实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 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
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
PHP 图片处理
2020/09/16 PHP
PHP7变量处理机制修改
2021/03/09 PHP
jquery动画1.加载指示器
2012/08/24 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
angular多语言配置详解
2019/05/16 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
python顺序执行多个py文件的方法
2019/06/29 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
2015年房地产销售工作总结
2015/04/20 职场文书
保外就医申请书范文
2015/08/06 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android