Disable a pop-up if the user is writing

Question

I would like to disable a pop up on my site if the user is writing in the subscribe input. The pop up is already set. Here's my code :

 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> 

How can I manage that? Maybe by breaking the Timer if the user is typing?

Thanks!

Answer 1

First of all, there's no sense in calling $(document).ready inside a callback for setTimeout . Especially if the timer is set to such a long time — by 10s it is almost always guaranteed that the DOM is ready.

The simplest way

As I understood, you want to abort the timer if the user already typed the e-mail. To do that, all you need to do is use clearTimeout function which will stop previously set timer.

 $(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"> 

I wouldn't recommend closing the pop-up automatically after it was showed to the user, as it'd be confusing. If you already showed something, let the user close it on his own.

Answer 2

So, the simplest way to do this would probably just be to record the time of the last keypress on the input in question. Here's a sample:

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

And then in your modal pop-up section:

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

In case you're wondering, new Date() creates a Date object, and calling getTime() on a Date object provides the Unix timestamp, or the number of milliseconds that have passed since the Unix epoch, which is January 1st, 1970, 00:00:00.

Answer 3

Use focus event on your input:

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

This disables your popup every time the focus is on the input field. You might want to disable the popup once the user has done typing. This can be achieved by

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