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>