Set timer for user input click

Question

I am trying to check if the user has clicked in an input with in a given time 3 seconds, if not hide the panel.

But my checkInput is not working. If I put it in the main jQuery if just shows for the 3 seconds and then disapears.

My Css is just display:none.

Any help would be good.

<div class="sign-up">
            <h4>Login</h4>
            <div class="sign-up-line">
            <asp:Label ID="lbl_usr_name" runat="server" Text="User name" /><br />
            <asp:TextBox ID="txt_usr_name" runat="server" CssClass="form-control" />
                                    </div>
            <div class="sign-up-line">
            <asp:Label ID="lbl_password" runat="server" Text="Password" /><br />
            <asp:TextBox ID="txt_password" runat="server" CssClass="form-control" TextMode="Password"/>
                                    </div>
            <div class="sign-up-text">
             <p>Forgotten your password <a href="#">click here</a></p>
             <p>Problems logging in <a href="#">click here</a></p>
             </div>
            </div>

var signUpPanel = $('.sign-up');
var userName = $('#txt_usr_name');
var password = $('#txt_password');


$('.sign-up-link').on('click', function () {
  if (signUpPanel.is(":hidden")) {
      userName.val('');
      password.val('');

      signUpPanel.slideDown('slow');

      checkInput();

   } else {
          signUpPanel.hide();

   }

});

function checkInput() {
     //set timer
     setTimeout(function () {
        if (userName.val() && password.val()) {
            signUpPanel.hide();
          } else if (!userName.val() && !password.val()) {
            signUpPanel.show();
          }
        }, 3000);
      }

In your checkInput() function you are hiding the panel if there IS a username and password value. Surely you want it the other way round? — Moob
– Moob, Commented Sep 3, 2014 at 15:37

Praveen Kumar Purushothaman · Accepted Answer · 2014-09-03 15:23:15Z

2

In your code, it doesn't have any timer functions or delay functions! So, assuming if there is a code like this:

<input id="clickMe" type="submit" value="Click within 3 Secs" />

If the user has to click within 3 seconds, you can do something like:

$(document).ready(function(){
    var a = setTimeout(function(){
        $("#clickMe").prop("disabled", true).hide();
    }, 3000);
    $("#clickMe").click(function(){
        clearInterval(a);
    });
});

Fiddle: http://jsfiddle.net/ex600p01/1/

answered Sep 3, 2014 at 15:23

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Praveen Kumar Purushothaman Over a year ago

Yes, that's what you need right? @StudentRik What you want it to do after 3 seconds?

Praveen Kumar Purushothaman Over a year ago

Okay, so you wanna say if the user clicks it, it should not disappear right?

StudentRik Over a year ago

Could I do this on the blur event as well?

Praveen Kumar Purushothaman Over a year ago

@StudentRik yes you can! :)

Moob Over a year ago

For maximum correctness you should be using clearTimeout not clearInterval. Just sayin' ;)

Moob · Accepted Answer · 2014-09-03 15:52:34Z

0

You could look at it differently, EG: Hide the panel after 3 seconds unless an input is clicked:

var signupTimeout = setTimeout(function(){signUpPanel.hide();}, 3000);
signUpPanel.on('click focus', 'input', function () {
    clearTimeout(signupTimeout);
});

http://jsfiddle.net/tjhp342j/1/

edited Sep 3, 2014 at 15:52

answered Sep 3, 2014 at 15:33

Moob

16.5k1 gold badge40 silver badges54 bronze badges

Collectives™ on Stack Overflow

Set timer for user input click

2 Answers 2

Fiddle: http://jsfiddle.net/ex600p01/1/

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Fiddle: http://jsfiddle.net/ex600p01/1/

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related