How to handle ESC keydown on javascript popup window

Question

I have a javascript window.open popup, and I want the popup to close itself when the user presses the ESC key. I can't figure out how to hook the keydown event (and on what object?) so that I can catch the ESC key.

I'm using jQuery.

score 120 · Accepted Answer · answered Sep 26 '09 at 16:57

120

Try something like this:

$(document).keydown(function(e) {
    // ESCAPE key pressed
    if (e.keyCode == 27) {
        window.close();
    }
});

answered Sep 26 '09 at 16:57

Gumbo

643,351
109
780
844

3

Thank you Gumbo for this. It came up as first thing on google :) – dvlden Nov 18 '12 at 19:07
ts linting is giving deprecated warning – carkod Jan 25 '22 at 14:54
this is deprecated, please use [this answer](https://stackoverflow.com/a/47614278/2312298) – André Mendonça Jun 16 '23 at 14:03

score 72 · Answer 2 · edited Sep 22 '16 at 04:26

72

It is possible to achieve with JS Without using jQuery.

window.onkeydown = function( event ) {
    if ( event.keyCode == 27 ) {
        console.log( 'escape pressed' );
    }
};

edited Sep 22 '16 at 04:26

Vishal

3,189
1
15
18

answered Jul 24 '14 at 22:44

user3874938

741
5
2

18

I understand that this is voted down because the question asked for jQuery, but for those looking for pure JavaScript this answer is very helpful. So 1 up-vote from me. – Jan Derk Aug 24 '14 at 09:47
9

Bear in mind that jQuery doesn't remove the ability to use regular JS. – Nick T Oct 06 '15 at 01:45
Awesome. Thanks a bunch! – Ivor Scott Nov 08 '16 at 23:18
I love seeing vanilla solutions. So damn ugly yet simple. – CodeUK Oct 12 '18 at 12:57
@Jan Derk and others: yes it's important for anyone to see that jQuery is JavaScript... and a good way to do that is to see them side-by-side... in my opinion, i prefer jQuery because i'm already taking the hit to load the jQuery library and it makes for consistent code... and i can code more efficiently using jQuery – aequalsb Aug 06 '21 at 17:50

score 29 · Answer 3 · edited Jun 20 '20 at 09:12

29

event.key === "Escape"

No more arbitrary number codes!

document.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; in ES6+
    if (key === "Escape") {
        window.close();
    }
});

Mozilla Docs

Supported Browsers

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 03 '17 at 01:08

Gibolt

42,564
15
187
127

score 4 · Answer 4 · edited May 23 '17 at 12:34

4

Remember that you must use the function @Gumbo posted in the popup-window... So you will need to include JQuery in the popup and execute the function there, not the window that opens the popup.

edited May 23 '17 at 12:34

Community

1
1

answered Sep 26 '09 at 17:13

PatrikAkerstrand

45,315
11
79
94

1

What is Gumbo? (meaningless spacing for Stackoverflow) – Andrew Arnott Sep 26 '09 at 17:57
Machine is referring to the function that Gumbo posted (that you accepted). – Darryl Hein Sep 26 '09 at 19:26

score 3 · Answer 5 · answered Aug 17 '20 at 06:25

3

To handle both esc and enter key on dialog window.onkeydown = function(event) {

if(event.keyCode===27|| event.keyCode===13){
   window.close();
}
}

answered Aug 17 '20 at 06:25

Mukesh Kumar

87
5

`keyCode` is deprecated. Use `KeyboardEvent.code` instead. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code – Haddock-san Nov 14 '22 at 12:56

score 1 · Answer 6 · answered Dec 21 '18 at 06:11

In case if any looking for angularjs popup solution here you go

*this is without using ui-bootstrap dependency(only recommended when there is no other way)

$scope.openModal = function(index){
    $scope.showpopup = true;
    event.stopPropagation();//cool part
};

$scope.closeModal = function(){
    $scope.cc.modal.showpopup = false;
};

window.onclick = function() {
  if ($scope.showpopup) {
      $scope.showpopup = false;
      // You should let angular know about the update that you have made, so that it can refresh the UI
      $scope.$apply();
  }
};

//escape key functionality playing with scope variable
document.onkeydown = function (event) {
  const key = event.key; // const {key} = event; in ES6+
  if (key === "Escape") {
    if ($scope.showpopup) {
        $scope.showpopup = false;
        // You should let angular know about the update that you have made, so that it can refresh the UI
        $scope.$apply();
    }
  }
};

References: above answers and http://blog.nkn.io/post/hiding-menu-when-clicking-outside---angularjs/

score 0 · Answer 7 · edited Jan 18 '14 at 11:09

0

You can easily achieve bind key events using Jquery.

Here you can use .keydown()

List of keyboard keys codes

  $(document).keydown(function(e) {        
    if (e.keyCode == 27) {
        window.close();
    }
});

edited Jan 18 '14 at 11:09

Ishan Jain

8,063
9
48
75

answered Jan 18 '14 at 10:50

TheDean

275
1
5
16

score 0 · Answer 8 · answered Aug 25 '16 at 18:17

@Gumbo 's answer is good but often you need to unhook this behaviour so I suggest to use the one event handler:

$(document).one('keydown', function(e) {
    // ESCAPE key pressed
    if (e.keyCode == 27) {
        window.close();
    }
});

OR

$(document).on('keydown', function(e) {
    // ESCAPE key pressed
    if (e.keyCode == 27) {
        window.close();
    }
});

and when ready to stop the behaviour

$(document).off('keydown');

How to handle ESC keydown on javascript popup window

8 Answers8

event.key === "Escape"

Linked