如果用户正在写，则禁用弹出窗口

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