current position:Home>JQuery implements the keyboard enter search function

JQuery implements the keyboard enter search function

2022-04-29 16:05:41Lingering memory of Yufei

jQuery Realize the keyboard enter search function

html Code

<div class="fl search-box"> 
     <button type="button" name="btnSubmit" id="btnSubmit" class="btnSubmit"> Search for </button>
     <input id="sousuo" name="sousuo" type="search" placeholder=" Enter search content " value="">
</div>

Search button implementation

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

Keyboard enter to search

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

It's actually equivalent to pressing enter event.keyCode == “13”, That is to say, the keyboard 13 Key codes , So take this to help , If you want to realize other keys in the future , Just check the key code corresponding to the keyboard .

copyright notice
author[Lingering memory of Yufei],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291425561670.html

Random recommended