Question

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

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

onkeypress事件

<body onkeypress="ESCclose(event)">

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

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

Answer 2

//使用bootstrap模式，它提供关闭转义模式的默认行为，或单击模态外部。或者

使用bootbox点击是或否进行回调。或者

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

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

更新：完成下面的工作示例html，用于bootstrap模式显示并隐藏在ESC按键上。注意：与data-keyboard =＆＃34; true＆＃34;一起，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 3

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

ESC kep关闭弹出窗体

3 个答案: