ESC KEP關閉彈出形式

我發現了一個碼在線可以幫助我使用ESC鍵關閉彈出的窗口。代碼如下：ESC KEP關閉彈出形式

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

onkeypress事件

<body onkeypress="ESCclose(event)">

我試圖在形式標籤使用onkeypress事件。它不工作，因爲我無法使用ESC按鈕關閉對話框。任何幫助？

來源

2017-04-06 beginner

的可能的複製[如何處理JavaScript彈出窗口上的ESC的keydown（http://stackoverflow.com/questions/1481626/how-to-handle-esc-keydown-on-javascript-popup-window ） – bharat

的問題是，因爲keypress事件不會觸發非打印字符（例如退格或逃跑）。

爲了解決這個問題，你可以使用代替：

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(); 
});

請注意，01上不需要on*事件屬性元素與上面的代碼。

來源

2017-04-06 08:13:59

非常好的解釋@RoryMcCrossan！ +1 ... –

非常感謝您的回答。當我使用引導模式時，我已將onkeydown放置在Div標記中。它stil不工作。我可以知道如何使用你的jQuery代碼嗎？ – beginner

如果你使用Bootstrap模式，那麼'window.close（）'不是你所需要的。你需要在模態本身上調用'hide'。請參閱Bootstrap模態文檔：http://getbootstrap.com/javascript/#modals-methods –

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

來源

2017-04-06 08:14:43

感謝您的解決方案 – beginner

//使用引導模式，該模式爲您提供關閉模式的默認行爲，或者在模態外單擊。或

使用bootbox它給點擊是或否的回調。 OR，如下圖所示，關閉模式

使用keyup事件。在Keydown事件之後觸發Keyup事件，因此在這種情況下使用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>

來源

2017-04-06 08:33:28 PrashanthBR

我正在使用引導模式。因爲我是jquery的新手。你能告訴我，我應該在哪裏放置上面的代碼？以及它如何鏈接到我的html代碼 – beginner

我正在使用引導模式。它沒有默認的esc按鈕行爲，當我在外面點擊時它甚至不會關閉。 – beginner

感謝您的幫助。它的工作:) – beginner

ESC KEP關閉彈出形式

回答

相關問題