CODEWITHSUNDEEP
javascripthtml
Sarem Hailemeskel
Sarem Hailemeskel

Reputation: 47

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>

Upvotes: 2

Views: 5948

Answers (3)

ismail
ismail

Reputation: 11

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

Upvotes: 1

NVRM
NVRM

Reputation: 13047

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>

Upvotes: 1

GhostRoboXt
GhostRoboXt

Reputation: 114

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.

Upvotes: 2

Related Questions