How to handle ESC keydown on javascript popup window
JavascriptJqueryPopupJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
Try something like this:
$(document).keydown(function(e) {
// ESCAPE key pressed
if (e.keyCode == 27) {
window.close();
}
});
Solution 2 - Javascript
It is possible to achieve with JS Without using jQuery.
window.onkeydown = function( event ) {
if ( event.keyCode == 27 ) {
console.log( 'escape pressed' );
}
};
Solution 3 - Javascript
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();
}
});
Solution 4 - Javascript
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.
Solution 5 - Javascript
To handle both esc and enter key on dialog window.onkeydown = function(event) {
if(event.keyCode===27|| event.keyCode===13){
window.close();
}
}
Solution 6 - Javascript
You can easily achieve bind key events using Jquery.
Here you can use .keydown()
$(document).keydown(function(e) {
if (e.keyCode == 27) {
window.close();
}
});
Solution 7 - Javascript
@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');
Solution 8 - Javascript
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/