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 = "=" + query
    debugger;
    window.open("=" + query, '_blank');
  }
}

<link rel="stylesheet" type="text/css" href=".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>

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./search?q=" + query
    debugger;
    window.open("https://www.google./search?q=" + query, '_blank');
  }
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn./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>

• javascript
• html

• 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. – GhostPengy Commented Jul 26, 2020 at 19:13

3 Answers 3

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>

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