How can I detect pressing Enter on the keyboard using jQuery?

Question

I would like to detect whether the user has pressed Enter using jQuery.

How is this possible? Does it require a plugin?

It looks like I need to use the keypress() method.

Are there browser issues with that command - like are there any browser compatibility issues I should know about?

Paolo_Bergantino_16417 · Answer

The whole point of jQuery is that you don't have to worry about browser differences. I am pretty sure you can safely go with enter being 13 in all browsers. So with that in mind, you can do this:

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

user_203112 · Answer

I wrote a small plugin to make it easier to bind the "on enter key pressed" event:

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

Usage:

$("#input").enterKey(function () {
    alert('Enter!');
})

user_20092 · Answer

I found this to be more cross-browser compatible:

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});

user_91768 · Answer

There's a keypress() event method. The Enter key's ASCII number is 13 and is not dependent on which browser is being used.

user_153923 · Answer

In some cases, you may need to suppress the ENTER key for a certain area of a page but not for other areas of a page, like the page below that contains a header

with a SEARCH field.

It took me a bit to figure out how to do this, and I am posting this simple yet complete example up here for the community.




  Test Script

Link to JSFiddle Playground: The [Submit] button does not do anything, but pressing ENTER from one of the Text Box controls will not submit the form.

user_8113455 · Answer

As the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

$(document).keydown(function(event) {
  if (event.keyCode || event.which === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    // Call function, trigger events and everything you want to do. Example: Trigger the button element with a click
    $("#btn").trigger('click');
  }
})

user_13363264 · Answer

I used $(document).on("keydown").

On some browsers keyCode is not supported. The same with which so if keyCode is not supported you need to use which and vice versa.

$(document).on("keydown", function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter";
  var code = e.keyCode || e.which
  var key = e.key
  if (code == ENTER_KEY_CODE || key == ENTER_KEY) {
    console.log("Enter key pressed")
  }
});

user_5695130 · Answer

$(document).keydown(function (event) {
      //proper indentiation of keycode and which to be equal to 13.
    if ( (event.keyCode || event.which) === 13) {
        // Cancel the default action, if needed
        event.preventDefault();
        //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
        $("#btnsearch").trigger('click');
    }
});

user_3197818 · Answer

$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});

user_11166949 · Answer

This my how I solved it. You should use return false;

$(document).on('keypress', function(e) {
    if(e.which == 13) {
        $('#sub_btn').trigger('click');
        alert('You pressed the "Enter" key somewhere');
        return false;
    }
});




    
        
        Subscribe to our Technical Analysis
    
    
        Signup for our regular Technical Analysis updates to review recommendations delivered directly in your inbox.

user_9123108 · Answer

$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});

How can I detect pressing Enter on the keyboard using jQuery?

19 Answers