Using jQuery to listen to keydown event

javascript jquery event-handling onkeydown jquery-events
Don P picture Don P · Feb 17, 2013 · Viewed 90.8k times · Source

I want to detect when the enter key is pressed, on HTML that will be injected dynamically.

To simply detect when the enter key is pressed, I can do:

$('#textfield').keydown(function (e){
    if(e.keyCode == 13){
        console.log('Enter was pressed');
    }
})

This code works for on(), but I am worried it is inefficient since jQuery will check every time a key is pressed. Is there anything inefficient about this?

$('body').on('keydown','#textfield', function(event) {
  if (event.keyCode == 13) {
    console.log('Enter was pressed');
  }
}

Answer

Aidan Ewen picture Aidan Ewen · Feb 17, 2013

If you want to capture the keypress anywhere on the page -

$(document).keypress(function(e) {
  if(e.which == 13) {
    // enter pressed
  }
});

Don't worry about the fact this checks for every keypress, it really isn't putting any significant load on the browser.

Related questions

jQuery checkbox change and click event

Here .change() updates the textbox value with the checkbox status. I use .click() to confirm the action on uncheck. If the user selects cancel, the checkmark is restored but .change() fires before confirmation. This leaves things in an inconsistent state …

Read More
jQuery checkbox checked state changed event

I want an event to fire client side when a checkbox is checked / unchecked: $('.checkbox').click(function() { if ($(this).is(':checked')) { // Do stuff } }); Basically I want it to happen for every checkbox on the page. Is this method …

Read More
event.preventDefault() vs. return false

When I want to prevent other event handlers from executing after a certain event is fired, I can use one of two techniques. I'll use jQuery in the examples, but this applies to plain-JS as well: 1. event.preventDefault() $('a').click(…

Read More