Result

タイトルの通り、contenteditableで編集可能な要素にplaceholderを与える、というもの

結果から言うと:emptyを使って何も入力されてない状態の時に:beforeで任意のテキストを挿入します

挿入するテキストはcontent: attr()で挿入します

css

[contenteditable=true]:empty:before{
  content: attr(placeholder);
  pointer-events: none;
  display: block; /* For Firefox */
}

div[contenteditable=true] {
  border: 1px dashed #AAA;
  width: 290px;
  padding: 15px;
}

CSSのみで完結します

html

<div contenteditable="true" placeholder="何か入力してみてください"></div>

CSS、HTMLともに簡単なコードで済むのでJSを使う必要はなさそうです。ブラウザさえ問題なければ

というわけでブラウザの対応状況を確認してみます

can i use

↑ contenteditableのサポート状況です。古いiOSやFirefox以外は問題なさそうです

↑ :emptyも問題なさそうですね。まぁそこまで高い需要のあるTipsでは無さそうですが。

via

Placeholder support for contentEditable elements, without JavaScript