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

Question

在write_comment 类中我们有输入字段textarea 和buttons 类，我想要的是buttons 类内容应该集中在 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
});

演示

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

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

.buttons {
  display: none;
}

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