it-swarm.com.de

So behandeln Sie den ESC-Keydown im Javascript-Popup-Fenster

Ich habe ein Javascript window.open Popup, und ich möchte, dass sich das Popup schließt, wenn der Benutzer die ESC-Taste drückt. Ich kann nicht herausfinden, wie das Keydown-Ereignis (und an welchem ​​Objekt?) Angehängt wird, damit ich die ESC-Taste abrufen kann.

Ich verwende jQuery.

39
Andrew Arnott

Versuchen Sie etwas so:

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

Mit JS ist es möglich, ohne jQuery zu verwenden.

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

Denken Sie daran, dass Sie die Funktion @Gumbo posted im Popup-Fenster verwenden müssen. Also müssen Sie JQuery in das Popup aufnehmen und dort die Funktion ausführen, nicht das Fenster, das das Popup öffnet.

3

event.key === "Flucht"

Keine beliebigen Nummerncodes mehr!

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

Mozilla Docs

Unterstützte Browser

2
Gibolt

@Gumbos Antwort ist gut, aber oft müssen Sie dieses Verhalten aushaken, daher empfehle ich den one-Ereignishandler:

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

und wenn Sie bereit sind, das Verhalten zu beenden

$(document).off('keydown');
0
Guillaume Bois

Sie können mit Jquery leicht bind key -Ereignisse erreichen. 

Hier können Sie .keydown() verwenden

Liste der Tastaturtastencodes

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

Für den Fall, dass Sie nach der Lösung für den anglejs popup suchen, gehen Sie hier

* ohne Ui-Bootstrap-Abhängigkeit (wird nur empfohlen, wenn es keine andere Möglichkeit gibt)

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

Referenzen: oben Antworten und http://blog.nkn.io/post/hiding-menu-when-clicking-outside---angularjs/

0
narasimharaosp