ESC 键关闭弹出窗体答案

【问题标题】：ESC kep to close the pop up formESC 键关闭弹出窗体
【发布时间】：2017-04-06 08:09:28
【问题描述】：

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

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

按键操作

<body onkeypress="ESCclose(event)">

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

【问题讨论】：

How to handle ESC keydown on javascript popup window的可能重复

标签： javascript jquery html onkeypress

【解决方案1】：

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

要解决此问题，您可以改用keydown：

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

&lt;body onkeydown="ESCclose(event)"&gt;&lt;/body&gt;

当您使用 jQuery 标记问题时，您可以使用它来更好地分离 HTML 和 JS 代码：

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

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

【讨论】：

非常感谢您的回答。当我使用引导模式时，我已将 onkeydown 放在 Div 标签中。它仍然无法正常工作。我可以知道如何使用你的 jquery 代码吗？
如果您使用的是 Bootstrap 模式，那么 window.close() 不是您所需要的。您需要在模态本身上调用hide。请参阅 Bootstrap 模态文档：getbootstrap.com/javascript/#modals-methods
虽然请注意，如果您使用的是引导模式，那么您的所有代码都是多余的。您可以只设置keyboard: true 选项，当按下 ESC 键时模态将隐藏。请参阅我在上一条评论中发布的链接的“选项”部分
哦，非常感谢您的帮助 :) 在我的代码中，数据键盘设置为 false。我做到了，它的工作原理。

【解决方案2】：

//使用引导模态，它为您提供在退出键上关闭模态或单击模态外部的默认行为。或者

使用bootbox，它会在单击是或否时进行回调。或者

使用如下所示的 keyup 事件来关闭模态框。 Keyup 事件在 Keydown 事件之后触发，因此在这种情况下使用 keyup 事件更为合适。

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

更新：下面的完整工作示例 html 用于在 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>

【讨论】：

我正在使用引导模式。因为我是 jquery 的新手。你能告诉我应该把上面的代码放在哪里吗？以及它将如何链接到我的 html 代码
我正在使用引导模式。它没有默认的 esc 按钮行为，当我在外面点击时它甚至不会关闭。
很高兴您找到了解决方案。但是，我已经用完整的示例代码更新了我的答案，供将来需要它的人使用。

【解决方案3】：

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

【讨论】：

【解决方案4】：

event.keyCode 已弃用。使用event.code，见API doc

Javascript

function closeOnESC(evt) {
  if (evt.code === 'Escape') {
   // do your stuff
   console.log('close the window...')
  }
}

HTML

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

【讨论】：