JSFiddle - React, Tailwind, and code Playground

HTML

<div class="placeholder" contentEditable="true" data-placeholder="Title"></div>

CSS

[contentEditable=true]:empty:not(:focus):before{
  content:attr(data-placeholder);
  color:grey;
}

div{
    font-size: 30px
}

JavaScript

// More descriptive name
var $input = $(".placeholder");
function clearPlaceHolder() {
  if ($input.text().length == 0) {
    $input.empty();
    }
  }

// On each click
$input.keyup(clearPlaceHolder);

// Probably not needed, but just in case
$input.click(clearPlaceHolder);

// Copy/paste/cut events http://stackoverflow.com/q/17796731
$input.bind('input', (clearPlaceHolder));

// Other strange events (javascript modification of value?)
$input.change(clearPlaceHolder);