How to disable esc key in html page using javascript or jquery

Question

I want to disable the ESC key in an HTML page. How can I do this?

I have a form which is appearing as jQuery UI Dialog. Here if I click the ESC key, the form will close. I want to disable that.

Answer 1

Browsers (Firefox, Chrome...) normally bind the Esc key to the "stop loading current page" action. Any other behaviour needs to be specifically coded with JavaScript.

The jQuery UI Dialog has a closeOnEscape setting. Just set it to false:

• Initialize a dialog with the closeOnEscape option specified:

  $( ".selector" ).dialog({ closeOnEscape: false });
  

• Get or set the closeOnEscape option, after init:

  //getter
  var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );
  //setter
  $( ".selector" ).dialog( "option", "closeOnEscape", false );
  

Answer 2

$(document).keydown(function(e) {
    if (e.keyCode == 27) return false;
});

*thanks Johan

Answer 3

The best way to do this is to figure out which dialog library you are using (colorbox? jquery ui? shadowbox) and disable the esc key (for example, in Colorbox you can set the escKey option to false).