Jquery: how to trigger click event on pressing enter key

462.2k Views Asked by At

I need to execute a button click event upon pressing key enter.

As it is at the moment the event is not firing.

Please Help me with the syntax if possible.

$(document).on("click", "input[name='butAssignProd']", function () {
   //all the action
});

this is my attempt to fire click event on enter.

$("#txtSearchProdAssign").keydown(function (e) {
  if (e.keyCode == 13) {
    $('input[name = butAssignProd]').click();
  }
});
15

There are 15 best solutions below

2
Vijay On BEST ANSWER

try out this....

$('#txtSearchProdAssign').keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    $('input[name = butAssignProd]').click();
    return false;  
  }
});   

$(function() {

  $('input[name="butAssignProd"]').click(function() {
    alert('Hello...!');
  });

  //press enter on text area..

  $('#txtSearchProdAssign').keypress(function(e) {
    var key = e.which;
    if (key == 13) // the enter key code
    {
      $('input[name = butAssignProd]').click();
      return false;
    }
  });

});
<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>
  <textarea id="txtSearchProdAssign"></textarea>
  <input type="text" name="butAssignProd" placeholder="click here">
</body>

</html>


Find Demo in jsbin.com

1
Shaun On

Are you trying to mimic a click on a button when the enter key is pressed? If so you may need to use the trigger syntax.

Try changing

$('input[name = butAssignProd]').click();

to

$('input[name = butAssignProd]').trigger("click");

If this isn't the problem then try taking a second look at your key capture syntax by looking at the solutions in this post: jQuery Event Keypress: Which key was pressed?

0
geekchic On
$('#txtSearchProdAssign').keypress(function (e) {
  if (e.which == 13) {
    $('input[name = butAssignProd]').click();
    return false;  
  }
});

I also just found Submitting a form on 'Enter' which covers most of the issues comprehensively.

2
Neeraj On

Try This

$('#twitterSearch').keydown(function(event){ 
    var id = event.key || event.which || event.keyCode || 0;   
    if (id == 13) {
        $('#startSearch').trigger('click');
    }
});

Hope it helps you

See also stackoverflow.com/keyCode vs which?

0
Rohit416 On

You were almost there. Here is what you can try though.

$(function(){
  $("#txtSearchProdAssign").keyup(function (e) {
    if (e.which == 13) {
      $('input[name="butAssignProd"]').trigger('click');
    }
  });
});

I have used trigger() to execute click and bind it on the keyup event insted of keydown because click event comprises of two events actually i.e. mousedown then mouseup. So to resemble things same as possible with keydown and keyup.

Here is a Demo

3
Daniel Dewhurst On

Another addition to make:

If you're dynamically adding an input, for example using append(), you must use the jQuery on() function.

$('#parent').on('keydown', '#input', function (e) {
    var key = e.which;
    if(key == 13) {
        alert("enter");
        $('#button').click();
        return false;
    }
});

UPDATE:

An even more efficient way of doing this would be to use a switch statement. You may find it cleaner, too.

Markup:

<div class="my-form">
  <input id="my-input" type="text">
</div>

jQuery:

$('.my-form').on('keydown', '#my-input', function (e) {
  var key = e.which;
  switch (key) {
  case 13: // enter
    alert('Enter key pressed.');
    break;
  default:
    break;
  }
});
0
Arron On

Just include preventDefault() function in the code,

$("#txtSearchProdAssign").keydown(function (e) 
{
   if (e.keyCode == 13) 
   {
       e.preventDefault();
       $('input[name = butAssignProd]').click();
   }
});
0
Vishnu Prasad On

Try This

<button class="click_on_enterkey" type="button" onclick="return false;">
<script>
$('.click_on_enterkey').on('keyup',function(event){
  if(event.keyCode == 13){
    $(this).click();
  }
});
<script>
3
xDaizu On

This appear to be default behaviour now, so it's enough to do:

$("#press-enter").on("click", function(){alert("You `clicked' or 'Entered' me!")})

You can try it in this JSFiddle

Tested on: Chrome 56.0 and Firefox (Dev Edition) 54.0a2, both with jQuery 2.2.x and 3.x

0
Code On

Jquery: Fire Button click event Using enter Button Press try this::

tabindex="0" onkeypress="return EnterEvent(event)"

 <!--Enter Event Script-->
    <script type="text/javascript">
        function EnterEvent(e) {
            if (e.keyCode == 13) {
                __doPostBack('<%=btnSave.UniqueID%>', "");
            }
        }
    </script>
    <!--Enter Event Script-->
0
Sandeep Sherpur On

You can use this code

$(document).keypress(function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
       alert('You pressed a ENTER key.');
    }
});
0
Supriya On

     $('#Search').keyup(function(e)
        {
            if (event.keyCode === 13) {
            e.preventDefault();
            var searchtext = $('#Search').val();
            window.location.href = "searchData.php?Search=" + searchtext + '&bit=1';
            }
        });

0
bloodymurderlive On

This is my preferred solution.

    $("#text").keyup(function(event) {
        if (event.which === 13) {
            $("#submit").click();
        }
    });

Super simple, super jQuery.

0
Serhii Korneliuk On

You can track the enter key on a dynamically created element.

jQuery(document).on('keypress', "[name=\"search\"]", function(e) {
    if (e.which == 13) {
        var _form = jQuery(document).find("[name=\"search\"]");
        window.location.href = window.location.href+'&'+_form.serialize();
    }
});
0
Gutmann Tarah On
Try This
--------





    $('#eventClick').keydown(function(event){ 
        let idTrigger = event.key || event.which || event.keyCode || 0;   
        if (idTrigger == 13) {
            $('#eventClick').trigger('click');
            alert("Hello! I am an alert box!!");
        }
    });

<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <button type="button" id="eventClick">Click Me!</button>