Trigger button click with JavaScript on Enter key in 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();" />

Update: I'd like to accept my own answer below, but since that is now allowed I will accept the next best solution.

Answer 1

Make the button a submit element, so it'll be atuomatic.

<input type="submit" id="btnSearch" value="Search" onclick="return doSomething();" />

Note that you'll need a form element containing the input fields to make this work. (thanks Sergey Ilinsky)

It's not a good practice to redefine standar behaviour, the Enter key should always call the submit button on a form.

Answer 2

In addition to AlbertEin's proposal, you would indeed need to add a surrounding form element (if you do not have one yet)

Answer 3

Well, in jQuery, this would work:

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

Sorry, I don't know how in plain JS, but maybe someone else could extrapolate this out?

P.S. use jQuery ;)

Answer 4

Figured this out:

 <input type="text" id="txtSearch" onkeypress="searchKeyPress(event);" />
 <input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />

 <script>
 function searchKeyPress(e)
 {
  // look for window.event in case event isn't passed in
  if (window.event) { e = window.event; }
  if (e.keyCode == 13)
  {
   document.getElementById('btnSearch').click();
  }
 }
 </script>

Answer 5

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();" />

Answer 6

onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

This is just something I have from a somewhat recent project... found it on the net... no idea if there's a better way or not in plain 'ol javascript.

Answer 7

Although, I'm pretty sure that as long as there is only one field in the form and one submit button, hitting enter should submit the form, even if there is another form on the page.

You can then capture the form onsubmit with js and do whatever validation or callbacks you want.

Answer 8

Microsoft doesn't support document.getElementById( ... );

I think you would have to use document.elements[ ... ]; but I'm not 100%

Answer 9

event.returnValue=false

use when handling the event or in the function your event handler calls

works in ie and opera at least

Answer 10

This onchange attempt is close, but misbehaves with respect to browser back then forward (on Safari 4.0.5 and Firefox 3.6.3), so ultimately, I wouldn't recommend it.

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