Как выполнить блок кода JS при нажатии клавиши ESC?

Question

Я хочу выполнить код JS при нажатии пользователем ESC ключ. Пожалуйста, помогите мне, как я могу это сделать? Мой текущий код не работает. Я не знаю, где я поступаю неправильно? Я только начинающий так пожалуйста, помогите мне ..

function hideModalKeyPress(e) 
 
{ 
 
\t if(e.keyCode == 27) 
 
\t { 
 
\t \t document.getElementsByClassName('modalOverlay')[0].style.visibility = "hidden"; 
 
\t } 
 
}

.modalOverlay 
 
{ 
 
    width: 200px; 
 
    height: 200px; 
 
    opacity: 0.8; 
 
    background-color: black; 
 
    visibility: visible; 
 
}

<div class="modalOverlay" onkeydown="hideModalKeyPress(e);">Press ESC to hide me.</div> 
 

 
/* 
 
* I want to set the div's visibility to hidden 
 
* when user presses ESC key 
 
*/

Answer 1

Вы можете использовать JQuery и выполните следующие действия:

$(document).keyup(function(e) { 
    if (e.keyCode == 27) { 
     $(".modalOverlay").css('visibility', 'hidden'); 
    } 
}); 

JSFiddle

Или в чистом JavaScript:

document.onkeydown = function(evt) { 
    evt = evt || window.event; 
    if (evt.keyCode == 27) { 
     document.getElementById("modal").style.visibility = "hidden"; 
    } 
}; 

JSFiddle

Answer 2

Это работает для меня:

document.addEventListener("keydown", hideModalKeyPress, false); 
function hideModalKeyPress(e) { 
    if(e.keyCode === 27) 
    { 
     document.getElementsByClassName('modalOverlay')[0].style.visibility = "hidden"; 
    } 
} 

Здесь работает jsfiddle: https://jsfiddle.net/7jrfrz26/