脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jq实现键盘回车搜索

jQuery实现键盘回车搜索功能

 更新时间：2017年07月25日 16:17:14   作者：冰唐玄宇  
本文通过代码给大家介绍了jquery实现键盘回车搜索功能，前台代码和搜索按钮实现代码都给大家贴出了，需要的朋友参考下吧

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

前台代码

<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插件用法实例

    这篇文章主要介绍了轻量级网页遮罩层jQuery插件用法,实例分析了jquery遮罩层插件的定义、功能及使用方法,非常简单实用,需要的朋友可以参考下
    2015-07-07
  • jQuery CSS()方法改变现有的CSS样式表

    jQuery CSS()方法改变现有的CSS样式表

    使用CSS()方法改变现有的CSS样式表，css()方法在使用上具有多样性，比如要改变链接颜色，如果需要改变多个样式属性，可先定义属性变量，然后直接赋值给css()方法
    2014-09-09
  • jquery 圆形旋转图片滚动切换效果

    jquery 圆形旋转图片滚动切换效果

    今回给大家介绍个圆形旋转的效果，基于圆形的物理特性，又圆上任意一点可以作为一个控制按钮，然后拖动它来使图片轮换。
    2011-01-01
  • jQuery Mobile 触摸事件实例

    jQuery Mobile 触摸事件实例

    这篇文章主要演示了5个jQuery Mobile 触摸事件实例,需要的朋友可以参考下。
    2016-06-06
  • jQuery实现跨域

    jQuery实现跨域

    这篇文章主要介绍了jQuery实现跨域的相关资料,需要的朋友可以参考下
    2015-02-02
  • jQuery日程管理插件fullcalendar使用详解

    jQuery日程管理插件fullcalendar使用详解

    这篇文章主要介绍了jQuery日程管理插件fullcalendar使用方法，整合农历节气和节日，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JQuery实现ul中添加LI和删除指定的Li元素功能完整示例

    JQuery实现ul中添加LI和删除指定的Li元素功能完整示例

    这篇文章主要介绍了JQuery实现ul中添加LI和删除指定的Li元素功能,结合完整实例形式分析了jQuery基于事件响应的页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-10-10
  • Jquery判断IE6等浏览器的代码

    Jquery判断IE6等浏览器的代码

    jquery中利用navigator.userAgent.indexOf来判断浏览器类型，并进行了一下处理，如果不想使用jquery，稍为修改下代码就可以为自己所用
    2011-04-04
  • 使用jQuery中的wrap()函数操作HTML元素的教程

    使用jQuery中的wrap()函数操作HTML元素的教程

    wrap(),顾名思义,就是包裹的意思,就是在你所在器外层包裹一层东西,接下来我们就详细来看使用jQuery中的wrap()函数操作HTML元素的教程:
    2016-05-05
  • jQuery回到顶部的代码

    jQuery回到顶部的代码

    在一些网站上，我们经常见到返回顶部的效果，本文给大家介绍基于jquery如何实现返回顶部效果，非常不错，感兴趣的朋友可以参考下
    2016-07-07

最新评论