Question

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

我有代码：

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

以上隐藏元素'div'onclick。我真正想要的是当我填充第一个字段，然后单击第二个字段时，它应该隐藏第一个字段。 div应该滑出来。例如，我有5个字段作为姓名，电子邮件，DOB，地址，邮政编码。因此，当我输入我的姓名，然后点击电子邮件时，名称DIV将通过滑出而消失。我是JQuery的新手。

我该怎么做？

由于

Answer 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>

Answer 2

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

类似的东西：

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

Answer 3

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

$(".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

Jquery输入后隐藏元素

3 个答案: