Question

我有一个基本的输入框，输入密码后会显示一个div。这工作正常，但我也希望密码输入框消失。我以为我可以使用相同的代码并将切换更改为隐藏，但只要按下一个字母就会隐藏div。

问题 - 如果密码完成（并且正确），我该如何让它隐藏起来。

我认为我需要if语句说'如果密码匹配则隐藏div'但我不确定......

我也想在隐藏输入div时加1秒延迟。这是用.delay函数完成的不是吗？

任何帮助都将不胜感激。

//this shows the div
$(document).ready(function() {
  'use strict';
  $('#ae').on('keyup', function() {
    $('#ae-form').toggle(this.value.trim().toLowerCase() == 'allerganemployee');
  });
});

//this needs to hide the input box		
$(document).ready(function() {
  'use strict';
  $('#ae').on('keyup', function() {
    $('#ae-input').hide(this.value.trim().toLowerCase() == 'allerganemployee');
  });
});

#ae-form {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="allergan box">
  <h2>Registration for Employees</h2>
  <div id="ae-input">
    <p>Please enter your password</p>
    <input type="password" id="ae" />
  </div>
  <div id="ae-form">
    This is the form
  </div>
</div>

Answer 1

＆＃13;

SparkContext

＆＃13;

//this shows the div
$(document).ready(function() {
  'use strict';
  $('#ae').on('keyup', function() {
    $('#ae-form').toggle(this.value.trim().toLowerCase() == 'allerganemployee');
    if(this.value.trim().toLowerCase() == 'allerganemployee'){
      $('#ae-input').hide();
    }
  });
});

＆＃13;

#ae-form {
  display: none;
}

＆＃13;

Answer 2

不要隐藏在keyup事件上，而是尝试使用focusout，这样在输入密码后，它会隐藏并使用delay(time_in_milliseconds)函数进行延迟。

＆＃13;

//this shows the div
$(document).ready(function() {
  'use strict';
  $('#ae').on('keyup', function() {
    $('#ae-form').toggle(this.value.trim().toLowerCase() == 'allerganemployee');
  });
});

var delay = function() {
  'use strict';
  $('#ae').on('focusout', function() {
    if(this.value.trim().toLowerCase() == 'allerganemployee'){
					$('#ae-input').delay(1000).hide();
	}
  });
};

//this needs to hide the input box		
$(document).ready(delay());

＆＃13;

#ae-form {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="allergan box">
  <h2>Registration for Employees</h2>
  <div id="ae-input">
    <p>Please enter your password</p>
    <input type="password" id="ae" />
  </div>
  <div id="ae-form">
    This is the form
  </div>
</div>

＆＃13;

Answer 3

＆＃13;

$(document).ready(function() {
   $('#ae-form').hide();
'use strict';
  $('#ae').on('change', function() {
    var a = this.value.trim().toLowerCase();
    setTimeout(function(){ 
      if(a == 'allerganemployee') {
        $('#ae-form').show();
        $('#ae').hide();
        $('#pwlabel').hide();
      } else {
        return;
      }
    }, 3000);
  });
});

＆＃13;

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="allergan box">
  <h2>Registration for Employees</h2>
  <div id="ae-input">
    <p id = "pwlabel">Please enter your password</p>
    <input type="password" id="ae" />
  </div>
  <div id="ae-form">
    This is the form
  </div>
</div>
</body>
</html>

＆＃13;

Answer 4

//this shows the div
$(document).ready(function() {
  'use strict';
  $('#ae').on('keyup', function() {
    var check =  this.value.trim().toLowerCase() == 'allerganemployee';
    if(check){
     setTimeout(function() {
      $('#ae-input').hide();
      $('#ae-form').toggle(check);
     },1000);
    }
  });
});

//this needs to hide the input box		
$(document).ready(function() {
  'use strict';
  $('#ae').on('keyup', function() {
   
  });
});

#ae-form {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="allergan box">
  <h2>Registration for Employees</h2>
  <div id="ae-input">
    <p>Please enter your password</p>
    <input type="password" id="ae" />
  </div>
  <div id="ae-form">
    This is the form
  </div>
</div>

密码完成时隐藏div

4 个答案: