输入字段为空时显示/隐藏div（jquery，javascript） [英] show/hide div when input field is empty(jquery, javascript)

问题描述

我有一个带内容的 div ，默认隐藏，我希望在用户输入时在输入字段中显示＃控制。

I have a div with content, hide on default and I want to show it, when user input, in the input field which is #control.

<form>
<input name="control" value="" id="control" />
<div class="show_hide">
  //some content here........
</div>
</form>

推荐答案

// Bind keyup event on the input
$('#control').keyup(function() {
  
  // If value is not empty
  if ($(this).val().length == 0) {
    // Hide the element
    $('.show_hide').hide();
  } else {
    // Otherwise show it
    $('.show_hide').show();
  }
}).keyup(); // Trigger the keyup event, thus running the handler on page load

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input name="control" id="control" />
  <div class="show_hide">
    //some content here........
  </div>
</form>

在keyup上检查输入的值，如果length为0表示空，则隐藏div否则显示

On keyup check the value of the input if length is 0 meaning empty hide the div otherwise show

这篇关于输入字段为空时显示/隐藏div（jquery，javascript）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！