how to make the enter key click search button

Question

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>

• ChickenChuken: Why not just replace div with the actual submit button? Not having submit can have many problems with mobile devices, where you will spend a lot of time fixing them. When submit is pressed you can halt the request and process data as needed. No need to have special key triggers or other stuff. Assuming you are using input withing the scope of a form.

Answer 1

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.

• 7FigureSwagger: Flawless, different issue than OP, but I commonly forget about the power of adding simple EventListeners. I used this method to hook the icon that is basically an end adornment on a BS5 input field. When using that button to call a function rather than submit a form, you'll need something like this. This should be accepted as it seems the most pure answer to OP. Nothing extra, just exactly what was asked for!

Answer 2

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>

Answer 3

const searchBtn = document.getElementById("button-search");
const searchInput = document.getElementById("search-field");
searchInput.addEventListener("keypress," function(event))
if (event.key == 'Enter')
 {
 searchBtn.click();
 }
});

• Community: Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.