I found a code online which helps me close pop up dialog using ESC button. The code is as follows:
<script type="text/javascript">
function ESCclose(evt) {
if (evt.keyCode == 27)
window.close();
}
</script>
onkeypress
<body onkeypress="ESCclose(event)">
I tried using onkeypress in form tag. Its not working as I am unable to close the dialog using ESC button. Any help?
I found a code online which helps me close pop up dialog using ESC button. The code is as follows:
<script type="text/javascript">
function ESCclose(evt) {
if (evt.keyCode == 27)
window.close();
}
</script>
onkeypress
<body onkeypress="ESCclose(event)">
I tried using onkeypress in form tag. Its not working as I am unable to close the dialog using ESC button. Any help?
Share Improve this question asked Apr 6, 2017 at 8:09 beginnerbeginner 3031 gold badge10 silver badges31 bronze badges 1- 1 Possible duplicate of How to handle ESC keydown on javascript popup window – bharat Commented Apr 6, 2017 at 8:17
4 Answers
Reset to default 6The issue is because the keypress event does not trigger for non-printable characters (eg backspace or escape).
To solve the problem, you could use keydown instead:
function ESCclose(evt) {
if (evt.keyCode == 27) {
//window.close();
console.log('close the window...')
}
}<body onkeydown="ESCclose(event)"></body>As you've tagged the question with jQuery, you could use that to better separate your HTML and JS code:
$(document).on('keydown', function(e) {
if (e.keyCode == 27)
window.close();
});
Note that no on* event attribute is required on the body element with the above code.
//Use a bootstrap modal which gives you default behavior of closing the modal on escape key or click on outside the modal. OR
Use bootbox which gives a callback on click of yes or no. OR
Use keyup event as shown below to close the modal. Keyup event is triggered after Keydown event, hence it is more appropriate to use keyup event in this scenario.
$(document).on('keyup',function(event) {
if (event.keyCode == 27) {
modal.hide();
}
});
UPDATE: Complete working example html below for bootstrap modal show and hide on ESC keypress. Note: Along with data-keyboard="true", tabindex=-1 attribute is important for the ESC keypress functionality.
<html>
<head>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery./jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#hereBtn").click(function (e) {
$("#alertModal").modal('show');
});
});
</script>
<title>Bootstrap modal</title>
</head>
<body>
<div>Click <button id="hereBtn" class="btn btn-success">HERE</button> to open Success modal</div>
<div id="alertModal" class="modal fade" role="dialog" data-keyboard="true" tabindex="-1">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 id="alertHeader"> SUCCESS!!</h4>
</div>
<div class="modal-body">
<div id="alertMessage" class="alert alert-success">Now hit ESC or click outside this modal to close this modal window</div>
</div>
</div>
</div>
</div>
</body>
</html>
$(document).on('keydown',function(event) {
if (event.keyCode == 27) {
window.close(); // Do Something
}
});
event.keyCode is deprecated. Use event.code, see API doc
Javascript
function closeOnESC(evt) {
if (evt.code === 'Escape') {
// do your stuff
console.log('close the window...')
}
}
HTML
<body onkeydown="closeOnEsc(event)"></body>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742299487a4417768.html
评论列表（0条）