J'ai un popup javascript.open popup, et je veux que le popup se ferme lorsque l'utilisateur appuie sur la touche Echap Je n'arrive pas à comprendre comment accrocher l'événement keydown (et sur quel objet?) Afin de pouvoir attraper la touche ESC.
J'utilise jQuery.
Essayez quelque chose comme ça:
$(document).keydown(function(e) {
// ESCAPE key pressed
if (e.keyCode == 27) {
window.close();
}
});
Il est possible de réaliser avec JS sans utiliser jQuery.
window.onkeydown = function( event ) {
if ( event.keyCode == 27 ) {
console.log( 'escape pressed' );
}
};
N'oubliez pas que vous devez utiliser la fonction @Gumbo posted dans la fenêtre contextuelle ... Vous devez donc inclure JQuery dans la fenêtre contextuelle et y exécuter la fonction, pas la fenêtre qui ouvre la fenêtre contextuelle.
Plus de codes numériques arbitraires!
document.addEventListener('keydown', function(event) {
const key = event.key; // const {key} = event; in ES6+
if (key === "Escape") {
window.close();
}
});
La réponse de @Gumbo est bonne, mais vous devez souvent décrocher ce problème. Je suggère donc d'utiliser le gestionnaire d'événements one
:
$(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();
}
});
et quand prêt à arrêter le comportement
$(document).off('keydown');
Vous pouvez facilement réaliser des événements bind key en utilisant Jquery.
Ici, vous pouvez utiliser .keydown()
Liste des codes de touches du clavier
$(document).keydown(function(e) {
if (e.keyCode == 27) {
window.close();
}
});
Au cas où si vous cherchez une solution popup angularjs ici vous allez
* ceci sans utiliser la dépendance ui-bootstrap (recommandé uniquement s'il n'y a pas d'autre moyen)
$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();
}
}
};
Références: réponses ci-dessus et http://blog.nkn.io/post/hiding-menu-when-clicking-outside---angularjs/