Подтвердить что ты не робот

Как справиться с нажатием клавиши ESC во всплывающем окне javascript

У меня есть всплывающее окно javascript window.open, и я хочу, чтобы всплывающее окно закрывалось, когда пользователь нажимает клавишу ESC. Я не могу понять, как подключить событие keydown (и на каком объекте?), Чтобы я мог поймать клавишу ESC.

Я использую jQuery.

4b9b3361

Ответ 1

Попробуйте что-то вроде этого:

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

Ответ 2

Можно добиться с помощью JS без использования jQuery.

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

Ответ 3

Помните, что во всплывающем окне вы должны использовать функцию @Gumbo. Поэтому вам нужно будет включить JQuery во всплывающее окно и выполнить функцию там, а не окно, открывающее всплывающее окно.

Ответ 6

@Ответ Gumbo хорош, но часто вам нужно отменить это поведение, поэтому я предлагаю использовать обработчик событий one:

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

ИЛИ

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

и при готовности остановить поведение

$(document).off('keydown');

Ответ 7

В случае, если кто-то ищет Angularjs всплывающее решение здесь вы идете

* это без использования зависимости ui-bootstrap (рекомендуется только тогда, когда нет другого пути)

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

Ссылки: выше ответы и http://blog.nkn.io/post/hiding-menu-when-clicking-outside---angularjs/