ESC 键关闭弹出窗体

Question

我在网上找到了一个代码，可以帮助我使用 ESC 按钮关闭弹出对话框。代码如下：

<script type="text/javascript">
 function ESCclose(evt) {
  if (evt.keyCode == 27) 
   window.close();
 }
</script>

按键

<body onkeypress="ESCclose(event)">

我尝试在表单标签中使用 onkeypress。它不起作用，因为我无法使用 ESC 按钮关闭对话框。有帮助吗？

Answer 1

问题是因为 keypress 事件不会针对非打印字符（例如退格键或转义符）触发。

要解决此问题，您可以使用 keydown 代替：

function ESCclose(evt) {
  if (evt.keyCode == 27) {
    //window.close();
    console.log('close the window...')
  }
}

<body onkeydown="ESCclose(event)"></body>

因为你用 jQuery 标记了问题，你可以使用它来更好地分离你的 HTML 和 JS 代码：

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

请注意，使用上述代码，body 元素不需要 on* 事件属性。

Answer 2

$(document).on('keydown',function(event) {
   if (event.keyCode == 27) {
        window.close(); // Do Something
    }
});

Answer 3

//使用 bootstrap 模态，它为您提供默认行为，即在转义键上关闭模态或在模态外部单击。或者

使用 bootbox 在点击是或否时给出回调。或者

使用如下所示的 keyup 事件关闭模式。 keyup事件是在keydown事件之后触发的，所以这种场景使用keyup事件比较合适。

$(document).on('keyup',function(event) {
   if (event.keyCode == 27) {
        modal.hide();
    }
});

更新：下面 html 的完整工作示例 bootstrap 模态显示和 ESC 按键隐藏。注意：与 data-keyboard="true" 一起，tabindex=-1 属性对于 ESC 按键功能很重要。

<html>
<head>
   <meta charset="utf-8">
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/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">&times;</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>

Answer 4

event.keyCode 已弃用。使用 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>

ESC 键关闭弹出窗体

ESC kep to close the pop up form

html

javascript

jquery

onkeypress