Question

下面是我的textbox和div，我的要求是，当用户单击txt1（texbox和txt2（texbox）时，如果输入密码，则仅显示div在txt1（{texbox）和txt2（texbox）中匹配，然后div应该被隐藏。我该怎么做

<input type="password" name="password" id="txt1" placeholder="Password" required />
<input type="password" name="password" id="txt2" placeholder="Password" required />
<div id="show" class="passwordContainer" style="display:none;">
</div>

我尝试了以下代码，但无法正常工作

<script type="text/javascript">
    $(document).ready(function () {
        $("#txt1").click(function () {
            $("#show").show();
        });
    });
</script>

Answer 1

您可以为此目的使用focus和blur。检查您的条件以隐藏在blur函数中。

$(document).ready(function() {
  $("#txt1 , #txt2 ").focus(function() {
    $("#show").show();
  });
  $("#txt1 , #txt2").blur(function() {
    var txt1 = $("#txt1").val();
    var txt2 = $("#txt2").val();
    if (txt1 == txt2)
      $("#show").hide();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="password" name="password" id="txt1" placeholder="Password" required />
<input type="password" name="password" id="txt2" placeholder="Password" required />
<div id="show" class="passwordContainer" style="display:none;">
  show
</div>

另一种替代方法是keyup而不是blur。如果keyup匹配，您还可以检查div上的条件以隐藏password。

仅当用户单击文本框时才如何显示div

1 个答案: