如果用戶正在寫，則禁用彈出窗口

Question

如果用戶在訂閱輸入中進行書寫，我想在我的網站上禁用彈出窗口。 彈出窗口已經設置。 這是我的代碼：

 setTimeout(function() { $(document).ready(function() { $("#enquirypopup").modal(); }) }, 10000); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <input type="text" class="required_email" style="color: #ffffff;" name="email" id="email" placeholder="EMAIL TO RECEIVE LIFE-TIME PREMIUM ACCESS"> </div> <div class="row"> <button class="btn btn-info btn-lg button" type="submit" id="butt" data-toggle="modal" data-target="#enquirypopup">SUBSCRIBE</button> </div> 

我該如何處理？ 如果用戶正在鍵入，也許會中斷計時器？

謝謝！

Answer 1

首先，在setTimeout的回調中調用$(document).ready沒有意義。 特別是如果將計時器設置為如此長的時間（即10秒），幾乎總是可以確保DOM准備就緒。

最簡單的方法

據我了解，如果用戶已經輸入了電子郵件，則想中止計時器。 為此，您所需要做的就是使用clearTimeout函數，該函數將停止先前設置的計時器。

 $(function(){ // This is a shortcut for $(document).ready() var showModal = function() { // $('#enquirypopup').modal(); alert('I am a fake modal. Please, do as I tell and fill the e-mail box.'); }; var showModalTimer = setTimeout(showModal, 5000); // Show modal after 5 seconds $('#email').on('keypress', function() { // Cancel the modal if user already typed something clearTimeout(showModalTimer); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="email" name="email" id="email" placeholder="EMAIL TO RECEIVE LIFE-TIME PREMIUM ACCESS"> 

我不建議在將彈出窗口顯示給用戶后自動關閉它，因為這會造成混亂。 如果您已經顯示了某些內容，請讓用戶自己關閉它。

Answer 2

因此，執行此操作的最簡單方法可能只是記錄有關輸入的最后一次按鍵的時間。 這是一個示例：

var lastTypedTime = new Date().getTime();
myInput.onkeydown = function() {
    lastTypedTime = new Date().getTime();
}

然后在您的模式彈出部分中：

var timeToAvoidModal = 5000;
setTimeout(function() {
    if (new Date().getTime() - lastTypedTime > timeToAvoidModal) {
        $('#enquiryPopup').modal();
    }
}, 10000);

如果您想知道， new Date()創建一個Date對象，並在Date對象上調用getTime()可以提供Unix時間戳，即自Unix紀元（即1970年1月1日）以來經過的毫秒數， 00:00:00。

Answer 3

在輸入中使用focus事件：

$("#email").on("focus", function () {
  $("#yourpopup").css("display", "none");
});

每當焦點位於輸入字段時，這將禁用您的彈出窗口。 用戶完成輸入后，您可能希望禁用彈出窗口。 這可以通過

$("#email").on("focusout", function () {
  $("#yourpopup").css("display", "auto");
});