Question

我试图检查用户是否在给定时间内点击输入3秒，如果没有隐藏面板。

但我的checkInput无效。如果我把它放在主jQuery中，如果只显示3秒然后消失。

我的Css只是显示：无。

任何帮助都会很好。

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

Answer 1

在您的代码中，它没有任何timer函数或delay函数！所以，假设有一个像这样的代码：

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

如果用户必须在3秒内点击，您可以执行以下操作：

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

小提琴：http://jsfiddle.net/ex600p01/1/

Answer 2

你可以用不同的方式看待它，EG：3秒后隐藏面板除非点击一个输入：

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

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

设置用户输入点击的计时器

2 个答案:

小提琴：http://jsfiddle.net/ex600p01/1/