Question

下面是我的HTML和js代码，我想当write_post_text（id）获得焦点然后write_post_upload（id）div应该显示，当write_post_container（id）div丢失了fus然后它应该被隐藏，实际上它工作正常但是问题是。当用户单击upload_post_img（id）按钮然后它失去焦点并且write_post_upload被使用slideUp函数隐藏但是何时。即使单击此按钮，我也想保持焦点。

<div class="upload_post" id="write_post_container" tabindex='-1'>           
 <form method="post">
<div class="upload_div">
 <textarea class="form-control" rows="1" cols="30" id="write_post_text" placeholder="Write what in your mind"></textarea>
</div>
<div class="upload" id="write_post_upload">
 <input type="hidden" name="post_img">
 <ul>
    <li><button type="button" id="upload_post_img"><i class="fa fa-camera" ></i>Image</button></li>
 </ul>
  <input type="file" name="file" id="bTimelineFile" onchange="readURL(this);" /> 

<div class="post">
<button>Post</button>
</div>
</div>
</form>

这是我的JS代码：

<script type="text/javascript">
 $("#write_post_text").focusin(function() {
    $("#write_post_upload").slideDown();
  });
 $("#write_post_container, #write_post_container *").blur(function(e){
     if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
 $("#write_post_upload").slideUp();
    }
});
$("#upload_post_img").click(function () {
      $("#bTimelineFile").focus().trigger('click');
      $("#write_post_upload").show();
});
</script>

Answer 1

您可以创建变量并在单击“选择文件”时进行更改

像这样

不要忘记重置它

 $("#write_post_text").focusin(function() {
    $("#write_post_upload").slideDown();
  });

  var blur = false;
 $("#write_post_container, #write_post_container *").blur(function(e){
     if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
     if(!blur){
                $("#write_post_upload").slideUp();    
     }

    }
});
$("#upload_post_img").click(function () {
      $("#bTimelineFile").focus().trigger('click');
      $("#write_post_upload").show();
});


$("#bTimelineFile").click(function () {
     blur = true;
});

单击内部按钮时如何不丢失Div焦点

1 个答案: