Question

＆＃13;

    $(document).ready(function() {
            $('#input').focusin(function() {
                $('#input').keyup(function() {
                    $('#div').show();  
                });
            });
            $('#input').focusout(function() {
                $('#div').hide();
            });
    
        });

＆＃13;

#div {
display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>HellWorld</div>
<input id='input' type='text'>

＆＃13;

在我的代码中，我试图让我的脚本像这样

当我按下#input并且没有输入任何内容时，#div被隐藏，但当我在#input中输入内容时，#div会显示，如果我点击了#input或#div #div消失，但如果我返回并再次点击#input，#div将再次出现。我如何修复代码来做到这一点，focusin&out还有一些奇怪的地方，如果我试图继续输入，旧的结果会再次出现。

Answer 1

您是否正在尝试执行此操作，如果您将注意力集中在哪里，并且输入值不为空，请保持显示div？如果您在关注输入时输入，并且值不为空，则显示div，如果输入为空，则隐藏div？

var toggleDiv = function() {
  // If not empty value, show div
  if ($('#input').val() !== '') {
    $('#div').show();
  } else {
    $('#div').removeClass('clicked').hide();
  }
};

$(document).ready(function() {

  $(window).click(function(e) {
    var targetId = $(e.target).attr('id');
    if (targetId !== 'div' && targetId !== 'input') {
      $("#div").removeClass('clicked').hide();
    }
  });

  $("#div").click(function(e) {
    $(this).addClass('clicked');
  });

  $('#input').focusin(function() {
    toggleDiv();
    $('#input').keyup(function() {
      toggleDiv();
    });
  });

  $('#input').focusout(function(e) {
    setTimeout(function() {
      if ($("#div").hasClass('clicked') === false) {
        $("#div").hide();
      }
    }, 100);
  });

});

#div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <div id="div">HellWorld</div>
  <input id="input" type="text" />

</body>

如何在输入处于活动状态时显示和隐藏div

1 个答案: