jQuery Event Keypress: Which key was pressed?

Question

With jQuery, how do I find out which key was pressed when I bind to the keypress event?

$('#searchbox input').bind('keypress', function(e) {});

I want to trigger an submit when ENTER is pressed.

[Update]

Even though I found the (or better: one) answer myself, there seems to be some room for variation ;)

Is there a difference between keyCode and which - especially if I'm just looking for ENTER, which will never be a unicode key?

Do some browsers provide one property and others provide the other one?

Answer 1

Okay, I was blind:

e.which

will contain the ASCII code of the key.

See https://developer.mozilla.org/En/DOM/Event.which

Answer 2

Try this

$('#searchbox input').bind('keypress', function(e) {
 if(e.keyCode==13){
  // Enter pressed... do anything here...
 }
});

Answer 3

Actually this is better:

 var code = (e.keyCode ? e.keyCode : e.which);
 if(code == 13) { //Enter keycode
   //Do something
 }

Answer 4

If you are using jQuery UI you have translations for common key codes. In ui/ui/ui.core.js:

$.ui.keyCode = { 
    ...
    ENTER: 13, 
    ...
};

There's also some translations in tests/simulate/jquery.simulate.js but I could not find any in the core JS library. Mind you, I merely grep'ed the sources. Maybe there is some other way to get rid of these magic numbers.

You can also make use of String.charCodeAt and .fromCharCode:

>>> String.charCodeAt('\r') == 13
true
>>> String.fromCharCode(13) == '\r'
true

Answer 5

or you can use this: http://code.google.com/p/js-hotkeys/ :)

Answer 6

$(document).ready(function(){
    $("#btnSubmit").bind("click",function(){$('#'+'<%=btnUpload.ClientID %>').trigger("click");return false;});
    $("body, input, textarea").keypress(function(e){
        if(e.which==13) $("#btnSubmit").click();
    });
});

Hope this may help you!!!

Answer 7

Try This:

jQuery('#myInput').keypress(function(e) {
  code = e.keyCode ? e.keyCode : e.which;
  if(code.toString() == 13) {
      alert('You pressed enter!');
  }
});

regards oyepez003

Answer 8

Here is an at-length description of the behaviour of various browsers http://unixpapa.com/js/key.html

Answer 9

Given that you are using jQuery, you should absolutely use .which. Yes different browsers set different properties, but jQuery will normalize them and set the .which value in each case. See documetation at http://api.jquery.com/keydown/ it states:

To determine which key was pressed, we can examine the event object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the .which property so we can reliably use it to retrieve the key code.

Answer 10

this is probably the better and Comprehensive one!

really Cross-Browser way:

if (!event.which && ((event.charCode || event.charCode === 0) ? event.charCode: event.keyCode)) {
    event.which = event.charCode || event.keyCode;
}

Answer 11

... this example prevents form submission (regularly the basic intention when capturing keystroke #13):

$('input#search').keypress(function(e) {
  if (e.keyCode == '13') {
     e.preventDefault();
     doSomethingWith($('input#search').val());
   }
});

Answer 12

Checkout this excellent jQuery hotkeys plugin which supports key combinations:

$(document).bind('keydown', 'ctrl+c', fn);

Answer 13

$('*').keypress(function(e){
    // '0' means 'Escape' key
    // 'keyCode' or 'which' both are same       
    if(e.keyCode == 0 || e.keyCode == 27){
        alert('Yes');
    }
       else{
          alert('No');  
       }
    //this is for input text field
    $('#input_text').val(e.which)
});

Please This is not working in chrome browser.. any body tell me