web-dev-qa-db-fra.com

Comment gérer le raccourci clavier sur la fenêtre popup javascript

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.

javascriptjquerypopup
39
Andrew Arnott

Essayez quelque chose comme ça:

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

Il est possible de réaliser avec JS sans utiliser jQuery.

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

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.

3
PatrikAkerstrand

event.key === "Escape"

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

Mozilla Docs

Navigateurs pris en charge

2
Gibolt

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');
0
Guillaume Bois

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

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/

0
narasimharaosp