Jquery: how to trigger click event on pressing enter key

Question

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();
  }
});

You may have to include a return false or a `e.preventDefault();` — geekchic, Aug 10 '13 at 09:04
AS a side-note: `e.keyCode` is not completely cross browser. use `e.which` instead. — Hashem Qolami, Aug 10 '13 at 09:07
In this case, you SHOULD use `keyup` instead of `keypress` or `keydown`. `keypress`/`keydown` events trigger continuously while the key is pressed: http://jsbin.com/uzoxuk/1/edit — Hashem Qolami, Aug 10 '13 at 09:27
The modern way: `e.key === 'Enter'` (supported in all modern browsers and even IE9+). I'll come back in another 7 years to post the new "modern" technique. — Dem Pilafian, Jan 08 '21 at 06:41

score 363 · Accepted Answer · edited Jun 20 '20 at 09:12

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

In case people want to recognize the "enter" keypress from anywhere, you can replace the $('#txtSearchProdAssign') and trigger on document $(document).keypress....... — dave4jr, Aug 08 '18 at 18:03
Looks questionable from an accessibility perspective. Will this definitely work across all kind of devices having differing "selection" methods? — Jonny, Oct 17 '19 at 09:10

score 33 · Answer 2 · edited Apr 17 '22 at 06:08

33

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?

edited Apr 17 '22 at 06:08

Top-Master

7,611
5
39
71

answered Aug 10 '13 at 09:12

Neeraj Dubey

4,401
8
30
49

4

Did you mean `if((event.keyCode || event.which) == 13)`? yes, it's fully cross browser which supports `Tab` key in FF. – Hashem Qolami Aug 10 '13 at 09:20
According to the [API](https://api.jquery.com/event.which/), `event.keyCode` is redundant, just use `event.which`. – konyak Apr 23 '15 at 21:56

score 16 · Answer 3 · edited May 23 '17 at 12:34

16

$('#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.

edited May 23 '17 at 12:34

Community

1
1

answered Aug 10 '13 at 09:08

geekchic

2,371
4
29
41

Rohit416 · Answer 4 · 2016-03-18T19:36:06.060

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

Daniel Dewhurst · Answer 5 · 2015-12-01T16:03:44.087

6

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;
  }
});

edited Dec 01 '15 at 16:03

answered Sep 08 '15 at 09:52

Daniel Dewhurst

2,533
2
21
39

2

IMO using a switch statement for a single condition is overkill. – alexia Dec 22 '15 at 18:55
It's more efficient than an if statement, though. – Daniel Dewhurst Dec 23 '15 at 09:13
2

I don't believe you. Can you cite a source? – Rolf Nov 04 '16 at 15:22

score 4 · Answer 6 · answered Sep 15 '21 at 02:37

4

This is my preferred solution.

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

Super simple, super jQuery.

answered Sep 15 '21 at 02:37

bloodymurderlive

367
2
15

score 3 · Answer 7 · edited May 23 '17 at 12:34

3

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?

edited May 23 '17 at 12:34

Community

1
1

answered Aug 10 '13 at 09:05

Shaun

1,220
10
24

From https://api.jquery.com/click/ - This method is a shortcut for .on( "click", handler ) in the first two variations, and .trigger( "click" ) in the third. so that would do exactly the same. – Capsule Nov 09 '18 at 00:13

score 3 · Answer 8 · edited Nov 20 '19 at 07:29

3

Just include preventDefault() function in the code,

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

edited Nov 20 '19 at 07:29

Arun J

687
4
14
27

answered Mar 08 '17 at 11:22

Arron

1,134
2
13
32

score 1 · Answer 9 · answered Mar 30 '17 at 07:36

1

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>

answered Mar 30 '17 at 07:36

Vishnu Prasad

190
1
8

score 1 · Answer 10 · answered Feb 18 '19 at 10:11

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-->

score 1 · Answer 11 · answered Sep 23 '19 at 10:34

1

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.');
    }
});

answered Sep 23 '19 at 10:34

Sandeep Sherpur

2,418
25
27

score 0 · Answer 12 · answered Feb 03 '20 at 08:30

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

score 0 · Answer 13 · answered Aug 09 '22 at 15:52

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();
    }
});

score 0 · Answer 14 · answered Aug 27 '22 at 10:34

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>

score -4 · Answer 15 · edited Apr 25 '17 at 11:15

-4

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

edited Apr 25 '17 at 11:15

Sphinx

956
7
21

answered Apr 05 '17 at 08:24

xDaizu

1,051
1
12
29

2

This doesn't seem to catch a 'return' press at all. – klokop Nov 22 '17 at 10:57
@klokop You are wrong, this catches a 'return' or 'enter'. I've just tried it myself with jQuery 3 on FF 63, Chrome 69, Safari 10.0.1, and Opera 55, both on their link and on a separate site I created to test this myself. That's a +1 from me. – hpm Oct 30 '18 at 10:22
you are using a button, enter will trigger buttons and tags but on a span say or as OP has a regular input field this is not the case. – Nickfmc Nov 03 '19 at 18:01

Jquery: how to trigger click event on pressing enter key

15 Answers15

Linked