jQuery实现键盘回车搜索功能

最新推荐文章于 2023-10-09 10:33:30 发布

原创最新推荐文章于 2023-10-09 10:33:30 发布 · 3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #jquery

Html 同时被 3 个专栏收录

262 篇文章

订阅专栏

Javascript

243 篇文章

订阅专栏

Jquery

200 篇文章

订阅专栏

本文详细介绍了如何使用jQuery为HTML中的搜索框添加键盘回车事件，使得用户无需点击搜索按钮即可完成搜索操作。通过实例代码展示，适合前端开发者学习和实践。

jQuery实现键盘回车搜索功能

html代码

<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个键码，那么借此帮助，以后想实现其他的按键的话，只要去查询键盘对应的键码就好了。