CODEWITHSUNDEEP
javascriptjquerypopup
Andrew Arnott
Andrew Arnott

Reputation: 81781

How to handle ESC keydown on javascript popup window

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.

Upvotes: 61

Views: 114465

Answers (8)

Mukesh Kumar
Mukesh Kumar

Reputation: 115

To handle both esc and enter key on dialog

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

Upvotes: 4

narasimharaosp
narasimharaosp

Reputation: 533

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/

Upvotes: 1

Gibolt
Gibolt

Reputation: 47107

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

Upvotes: 35

user3874938
user3874938

Reputation: 761

It is possible to achieve with JS Without using jQuery.

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

Upvotes: 74

Guillaume Bois
Guillaume Bois

Reputation: 1331

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

Upvotes: 0

TheDean
TheDean

Reputation: 285

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

Upvotes: 0

PatrikAkerstrand
PatrikAkerstrand

Reputation: 45721

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.

Upvotes: 4

Gumbo
Gumbo

Reputation: 655219

Try something like this:

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

Upvotes: 121

Related Questions