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获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery操作css样式
May 15 jQuery
jQuery操作之效果详解
May 19 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
JQuery animate动画应用示例
May 14 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
session 的生命周期是多长
2006/10/09 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
python抓取网页内容示例分享
2014/02/24 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
Python中url标签使用知识点总结
2020/01/16 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
大三预备党员入党思想汇报
2014/01/08 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
展览会邀请函
2015/02/02 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL