Monday, June 11, 2012

Which keycode for escape key with jQuery


I have two functions. When enter is pressed the functions runs correctly but when escape is pressed it doesn't. What's the correct number for the escape key?




$(document).keypress(function(e) {
if (e.which == 13) { $('.save').click(); } // enter (works as expected)
if (e.which == 27) { $('.cancel').click(); } // esc (does not work)
});


Source: Tips4all

9 comments:

  1. Try with the keyup event:

    $(document).keyup(function(e) {
    if (e.keyCode == 13) { $('.save').click(); } // enter
    if (e.keyCode == 27) { $('.cancel').click(); } // esc
    });

    ReplyDelete
  2. Rather than hardcode the keycode values in your function, consider using named constants to better convey your meaning:

    var KEYCODE_ENTER = 13;
    var KEYCODE_ESC = 27;

    $(document).keyup(function(e) {
    if (e.keyCode == KEYCODE_ENTER) { $('.save').click(); }
    if (e.keyCode == KEYCODE_ESC) { $('.cancel').click(); }
    });


    Some browsers (like FireFox, unsure of others) define a global KeyEvent object that exposes these types of constants for you. This SO question shows a nice way of defining that object in other browsers as well.

    ReplyDelete
  3. To capture ESCAPE, you need to look at e.keyCode as opposed to e.which. The value will be 27.

    ReplyDelete
  4. Try the jEscape plugin (sample usage)

    $(document).escape(function() {
    alert('ESC button pressed');
    });


    or get keycode for cross browser

    var code = (e.keyCode ? e.keyCode : e.which);
    if (code === 27) { alert('ESC'); }
    if (code === 13) { alert('ENTER'); }


    maybe you can use switch

    var code = (e.keyCode ? e.keyCode : e.which);
    switch (code) {
    case 27:
    alert('ESC');
    break;
    case 13:
    alert('ENTER');
    break;
    }

    ReplyDelete
  5. 27 is the code for the escape key. :)

    ReplyDelete
  6. To get the hex code for all the characters: http://asciitable.com/

    ReplyDelete
  7. I'm was trying to do the same thing and it was bugging the crap out of me. In firefox, it appears that if you try to do some things when the escape key is pressed, it continues processing the escape key which then cancels whatever you were trying to do. Alert works fine. But in my case, I wanted to go back in the history which did not work. Finally figured out that I had to force the propagation of the event to stop as shown below...

    if (keyCode == 27)
    {
    history.back();

    if (window.event)
    {
    // IE works fine anyways so this isn't really needed
    e.cancelBubble = true;
    e.returnValue = false;
    }
    else if (e.stopPropagation)
    {
    // In firefox, this is what keeps the escape key from canceling the history.back()
    e.stopPropagation();
    e.preventDefault();
    }

    return (false);
    }

    ReplyDelete
  8. Your code works just fine. It's most likely the window thats not focused. I use a similar function to close iframe boxes etc.

    $(document).ready(function(){

    // Set focus
    setTimeout('window.focus()',1000);

    });

    $(document).keypress(function(e) {

    // Enable esc
    if (e.keyCode == 27) {
    parent.document.getElementById('iframediv').style.display='none';
    parent.document.getElementById('iframe').src='/views/view.empty.black.html';
    }

    });

    ReplyDelete
  9. I have always used keyup and e.which to catch escape key.

    ReplyDelete