Using jQuery to listen to keydown event

Question

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

No. Literally thousands of things happen when a key is pressed, it'll be like a drop in the ocean. — JJJ, Feb 17 '13 at 08:59

score 62 · Accepted Answer · answered Feb 17 '13 at 09:02

62

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.

answered Feb 17 '13 at 09:02

Aidan Ewen

13,049
8
63
88

buy why is someone typing into a hidden field? @DCdaz – M H Oct 24 '19 at 13:42
A field that has been hidden or injected and shown again after Dom. – Oct 25 '19 at 09:18

score 10 · Answer 2 · edited Aug 12 '16 at 13:26

10

You could still use .on()

$(document).off('keyup#textfield');

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

edited Aug 12 '16 at 13:26

Gavin Anderegg

6,281
2
25
35

answered Dec 08 '14 at 16:03

MarvinVK

2,964
1
22
21

score 1 · Answer 3 · answered Feb 17 '13 at 08:59

1

In practical terms, nothing you have to worry about. The browser is already going to be bubbling that event, and even though it may be trapped by the body and run a selector from the delegated event, this is not a deep or difficult practical check for JQuery to perform, especially with an ID-only selector.

answered Feb 17 '13 at 08:59

Plynx

11,341
3
32
33

Agree. BTW: You don't really have a choice - theres no way to add a listener to key (although it would be nice). – Fabian Lauer Feb 17 '13 at 09:03
...and even if there were a way to add a listener to a single key, internally the browser would *still* have to react to every keypress to determine which key was pressed. – JJJ Feb 17 '13 at 09:20

Using jQuery to listen to keydown event

3 Answers3

Linked