简体   繁体   中英

how to make the enter key click search button

How do I make the enter key press the search button? Thanks in advance.

 function search(query) { if (query.slice(0, 7) == "http://") { // window.location.href = query window.open(query, '_blank'); } else { // window.location.href = "https://www.google.com/search?q=" + query debugger; window.open("https://www.google.com/search?q=" + query, '_blank'); } }
 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="box"> <div class="container-1"> <input type="search" id="search" placeholder="Search..." /> <div class="icon" onclick="search(document.getElementById('search').value)"><i class="fa fa-search"></i></div> </div> </div>

Here is an example:

// Get the input field
var input = document.getElementById("myInput");

// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    // Trigger the button element with a click
    document.getElementById("myBtn").click();
  }
});

That should answer your question.

Actually it can be done simply by using a form and retrieve the input by name.

Notice we can even remove the button <input type="submit"> , we can still use the ENTER key.

I left the simplest logic:

 function search(query){ query.preventDefault(); let vquery = query.target.elements["search"].value; console.log(vquery) } something.addEventListener("submit", search, false)
 <div class="box"> <div class="container-1"> <form id="something"> <input name="search" placeholder="Search... type ENTER to submit or use the button -->"> <input type="submit"> </form> <div class="icon" ></div> </div> </div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM