У меня есть всплывающее окно javascript window.open, и я хочу, чтобы всплывающее окно закрывалось, когда пользователь нажимает клавишу ESC. Я не могу понять, как привязать событие нажатия клавиши (и на каком объекте?), Чтобы я мог поймать клавишу ESC.
Я использую jQuery.
Попробуйте что-то вроде этого:
$(document).keydown(function(e) {
// ESCAPE key pressed
if (e.keyCode == 27) {
window.close();
}
});
Этого можно добиться с помощью JS без использования jQuery.
window.onkeydown = function( event ) {
if ( event.keyCode == 27 ) {
console.log( 'escape pressed' );
}
};
Больше никаких произвольных числовых кодов!
document.addEventListener('keydown', function(event) {
const key = event.key; // const {key} = event; in ES6+
if (key === "Escape") {
window.close();
}
});
Помните, что вы должны использовать функцию опубликовано @Gumbo во всплывающем окне ... Таким образом, вам нужно будет включить JQuery во всплывающее окно и выполнить там функцию, а не окно, открывающее всплывающее окно.
Для обработки как esc, так и клавиши ввода в диалоговом окне. Onkeydown = function (event) {
if(event.keyCode===27|| event.keyCode===13){
window.close();
}
}
Вы можете легко добиться привязки ключевых событий с помощью JQuery.
Здесь вы можете использовать .keydown()
Список кодов клавиш клавиатуры
$(document).keydown(function(e) {
if (e.keyCode == 27) {
window.close();
}
});
Ответ @Gumbo хорош, но часто вам нужно отключить это поведение, поэтому я предлагаю использовать обработчик событий 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();
}
});
и когда будете готовы прекратить поведение
$(document).off('keydown');
В случае, если кто-то ищет всплывающее решение 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/
