Jquery在输入后隐藏元素

Posted 2023-02-25

【中文标题】Jquery在输入后隐藏元素

【英文标题】：Jquery Hide the element after input

【发布时间】：2015-02-06 00:21:18

【问题描述】：

JS/Jquery 在焦点下一个元素上消失/jquery 在焦点上的元素上隐藏前一个元素在有输入后

我有代码：

<script>
$(document).ready(function()
$("div").click(function()
$("#hide").hide();
);
);
</script>

上面隐藏了元素'div' onclick。我真正要找的是当我填写了第一个字段，然后单击第二个，然后它应该隐藏第一个。 div 应该滑出。例如，我有 5 个字段，分别是姓名、电子邮件、出生日期、地址、邮政编码。因此，当我输入我的姓名并单击电子邮件时，姓名 DIV 应该会通过滑出而消失。我是 JQuery 新手。

我该怎么做？

谢谢

【问题讨论】：

您可以在模糊中隐藏您的字段，但从用户体验的角度来看，这是非常糟糕的。如果您犯了错误，如何回到您刚刚填写的字段进行更改？

【参考方案1】：

这是一个非常简单的答案，您可以轻松扩展：

$('input#email').click(function()
    if ($('input#name').val().length > 0 )
        $('input#name').hide();
    
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='name' placeholder="name"></input><br>
<input id='email' placeholder="email"></input><br>

【参考方案2】：

虽然对用户隐藏字段不是一个好主意，但当 focus 设置在另一个字段上时，您可以 fadeOut 每个非空字段。这样，当您在表单外部单击时，您至少有可能返回到字段（在未单击任何其他字段之前，它将可见）。

$(".txt").focus(function()
  var inputs = $(".txt").not($(this)).not(".txt:hidden");
  if($(".txt").not(".txt:hidden").length == 2)
    $(".txt").focusout(function()
      if($(this).val())
        $(this).fadeOut();     
      
    );
  
  inputs.each(function()
    if($(this).val())
      $(this).fadeOut();
    
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div><input type="text" class="txt" placeholder="Name"/></div>
<div><input type="text" class="txt" placeholder="Email"/></div>
<div><input type="text" class="txt" placeholder="DOB"/></div>
<div><input type="text" class="txt" placeholder="Address"/></div>
<div><input type="text" class="txt" placeholder="Post Code"/></div>

JSFiddle

【参考方案3】：

您可以使用 jQuery 的 on() 或 bind() 方法绑定事件。你关心的事件是blur，当元素失去焦点时触发。

类似：

$('#name').on('blur', function() 
    $(this).hide();
);