如何在焦点上显示/隐藏div内容？

Question

在 write_comment 类中，我们有输入字段 textarea 和按钮类，我想要的是，按钮类内容应该集中在 textarea

上

  <div class="write_comment">
      <div class="md-form">
        <textarea type="text" id="form_task_comment" class="form-control" style=""
          name="form_task_comment" value="" placeholder=""></textarea>
      </div>
      <div class="buttons">
        <span>
          <a><i class="fa fa-check" aria-hidden="true"></i></a>
          <a><i class="fa fa-times" aria-hidden="true"></i></a>
        </span>
      </div>
  </div>

Answer 1

只需抓取textarea和show所需元素的焦点事件

即可

$("#form_task_comment").focus(function() {
  $(".buttons").show(); //show when user moves focus in the textarea
});

$("#form_task_comment").on("change, blur", function() {
  $(".buttons").hide(); //hide when user moves focus out of the textarea
});

<强>演示

＆＃13;

＆＃13;

$("#form_task_comment").focus(function() {
  $(".buttons").show();
});

$("#form_task_comment").on("change, blur", function() {
  $(".buttons").hide();
});

＆＃13;

.buttons {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="write_comment">
  <div class="md-form">
    <textarea type="text" id="form_task_comment" class="form-control" style="" name="form_task_comment" value="" placeholder=""></textarea>
  </div>
  <div class="buttons">
    <span>
          <a><i class="fa fa-check" aria-hidden="true">123 inside buttons</i></a>
          <a><i class="fa fa-times" aria-hidden="true">1232 inside buttons</i></a>
        </span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以这样做：

.buttons {
  display: none;
}

textarea:focus ~ .buttons { /* can also use + in this case because it's the first element after it */
  display: block;
}

<div class="write_comment">
  <!-- <div class="md-form"> -->
    <textarea type="text" id="form_task_comment" class="form-control" style=""
    name="form_task_comment" value="" placeholder=""></textarea>
  <!-- </div> -->
  <div class="buttons">
    <span>
      <a><i class="fa fa-check" aria-hidden="true">Button 1</i></a>
      <a><i class="fa fa-times" aria-hidden="true">Button 2</i></a>
    </span>
  </div>
</div>

或者像这样：

.buttons {
  display: none;
}

textarea:focus ~ .buttons { /* can also use + in this case because it's the first element after it */
  display: block;
}

<div class="write_comment">
  <div class="md-form">
    <textarea type="text" id="form_task_comment" class="form-control" style=""
    name="form_task_comment" value="" placeholder=""></textarea>
    <div class="buttons">
      <span>
        <a><i class="fa fa-check" aria-hidden="true">Button 1</i></a>
        <a><i class="fa fa-times" aria-hidden="true">Button 2</i></a>
      </span>
    </div>
  </div>
</div>

Answer 3

使用jQuery：

$("#form_task_comment").focus(function() {
    $(".button").fadeIn();
});
$("#form_task_comment").focusout(function() {
    $(".button").fadeOut();
});