Jquery: how to trigger click event on pressing enter key or clicking button

Question

I have a button that triggers a jquery event but only if the button is clicked. Is it possible to make it work if it is clicked or the return key is used?

$(document).ready(function () {
    var zipCodes = [60538, 60504];
    $("#buttontest").click(function () {
        var zipIndex = zipCodes.indexOf(parseInt($("#full_day").val()));
        $("#zipMessage > div").hide("fast");
        var zipId = zipIndex > -1 ? zipCodes[zipIndex] : "Error";
        $("#zip" + zipId).show("fast");
    });
});

Here is a working example; http://jsfiddle.net/7SPGh

Answer 1

As long as the button has focus, enter will trigger the click event. I think you mean you'd like to trigger a click if enter is pressed while the textbox has focus...

So, add a keydown handler to the textbox:

$(() => {
  $("#buttontest").click(e => console.log(`${e.target.id}:${e.type}`));
  $("#full_day").keydown(e => {
    if (e.which === 13) {
      $("#buttontest").triggerHandler("click");
      e.preventDefault();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' id="full_day" />
<input type='button' id="buttontest" value="Enter Zip Code" />

Now, if you were using a form with a submit button, that'd be handled for you...

$(() => {
  $("form").on("submit", e => {
    console.log(`${e.target.id}:${e.type}`);
    e.preventDefault();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="zipForm">
  <input name="zip" value="90210">
  <button type="submit">submit</button>
</form>

Answer 2

You could wrap the input and the button into a form element an listen for the submit event:

<form id="form">
<input type='text' id="full_day"/>
<input type='submit' id="buttontest" value="Enter Zip Code"/>
</form>

$("#form").submit(function(e){
   e.preventDefault();
   // ...
});

http://jsfiddle.net/nJH3g/2/

Edit: type must be changed from button to submit to trigger the submit event.

Answer 3

Add another event listener for keypress. If the keycode is 13 (which is the return key), then run the function.

elem.addEventListener('keypress',function(){someFunc(e);}, false);

function someFunc(e){
if (e.keyCode === 13){

//run  your code

}

This is pure javascript.

Answer 4

Picking up your example, this is the solution: http://jsfiddle.net/7SPGh/7/

$(document).ready(function(){
  var zipCodes = [60538,60504];
  $("#buttontest").click(function(){
   var zipIndex = zipCodes.indexOf(parseInt($("#full_day").val()));
   $("#zipMessage > div").hide("fast");
   var zipId = zipIndex > -1 ? zipCodes[zipIndex] : "Error";
   $("#zip"+zipId).show("fast");

    });
    $("#full_day").keypress(function(e) {
        if(e.which == 13) {
        alert('You pressed enter!');
    }

  });
});

Answer 5

Here is your working example:

http://jsfiddle.net/3JEKg/

Bind this in your element that you want to trigger the button click with Enter key Press

$('body').bind('keypress',function (event){
  if (event.keyCode === 13){
    $("#buttontest").trigger('click');
  }
});

Answer 6

To improve upon canon's answer, you can bind to the key up or down event using jQuery's on event and look for the return key. Then you can check if an item that you want to trigger the click event on is in focus. Here I have used the hasClass to check if it is an appropriate item. Then you can trigger the click event on the item in focus.

$(window).on({
    keyup: function (event) {
        if (event.which === 13 && $(':focus').hasClass('item')) {
            $(':focus').trigger('click');
        }
    }
});

Answer 7

Try creating listeners for both key presses and mouse clicks:

function myFunction(e){
  if (e.which=='13' || e.type=='click'){
    // Run your code here
  }
}
$(document)
  .on('click', '#buttontest', myFunction)
  .on('keypress', this, myFunction);

Answer 8

take a look at this discussion

$('#full_day').keypress(function(e) {
    if(e.which == 13) {
        jQuery(this).blur();
        jQuery('#buttontest').trigger("click");
    }
});