Trigger a button click with JavaScript on the Enter key in a text box

Question

I have one text input and one button (see below). How can I use JavaScript to trigger the button's click event when the Enter key is pressed inside the text box?

There is already a different submit button on my current page, so I can't simply make the button a submit button. And, I only want the Enter key to click this specific button if it is pressed from within this one text box, nothing else.

<input type="text" id="txtSearch" /> <input type="button" id="btnSearch" value="Search" onclick="doSomething();" /> 

Answer 1

In jQuery, the following would work:

$("#id_of_textbox").keyup(function(event) {     if (event.keyCode === 13) {         $("#id_of_button").click();     } }); 

$("#pw").keyup(function(event) {      if (event.keyCode === 13) {          $("#myButton").click();      }  });    $("#myButton").click(function() {    alert("Button code executed.");  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    Username:<input id="username" type="text"><br>  Password:&nbsp;<input id="pw" type="password"><br>  <button id="myButton">Submit</button>

Or in plain JavaScript, the following would work:

document.getElementById("id_of_textbox")     .addEventListener("keyup", function(event) {     event.preventDefault();     if (event.keyCode === 13) {         document.getElementById("id_of_button").click();     } }); 

document.getElementById("pw")      .addEventListener("keyup", function(event) {      event.preventDefault();      if (event.keyCode === 13) {          document.getElementById("myButton").click();      }  });    function buttonCode()  {    alert("Button code executed.");  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    Username:<input id="username" type="text"><br>  Password:&nbsp;<input id="pw" type="password"><br>  <button id="myButton" onclick="buttonCode()">Submit</button>

Answer 2

Then just code it in!

<input type = "text"        id = "txtSearch"         onkeydown = "if (event.keyCode == 13)                         document.getElementById('btnSearch').click()"     />  <input type = "button"        id = "btnSearch"        value = "Search"        onclick = "doSomething();" />