I'm trying to clone Homepage of Facebook web using plain HTML, CSS and Javascript. The problem is the "Create post" area.image of this area in real Facebook web Let's pay attention to the line of text "What's in your mind,..?"

In real web: When user create a post, when type something, the line of text "What's in your mind,..?" is disappeared. Also when click outside, no thing happen with which user type.

But this is my problem: problem with 'fake' placeholder use by div tag When i type something, the line of text "What's in your mind,..?" is also disappeared. But when click outside, it's appear again before text i type. And i expect a solution that keep my placeholder, but when have something that user type, the placeholder text don't appear like input tag.

If you ask me why use div tag instead of input tag or textarea tag, the reason relate to image which user will add to their post (the image have to inside with text that user type), so i have to make a 'fake' placeholder for div tag use attribute: contenteditable="true"

This is all of my code inside div tag:

<div
  id="content"
  contenteditable="true"
  data-text="What's on your mind, Ann?"
>
  <br /><br />
  <input
    type="file"
    name="image"
    id="file"
    onchange="loadImg(event)"
    style="display: none"
  />
  <div id="form__body__imgPlaceholder__outer">
    <div id="imgPlaceholder__close" onclick="closeImg()">
      <img src="./images/postStatus/close-icon.svg" alt="" />
    </div>
    <label for="file" style="cursor: pointer">
      <div id="form__body__imgPlaceholder">
        <div class="imgPlaceholder__action">
          <div class="imgPlaceholder__chooseImg">
            Choose image
          </div>
        </div>
      </div>
      <img src="" alt="" id="image" />
    </label>
  </div>
</div>

Thanks a lot!