contenteditable 属性に遭遇したことがあるかもしれません。多くの場所で使用されています。これは、テキストエリアのようなものよりもはるかに優れた代替品です。 contenteditable="true" を任意の div に追加すると、入力フィールドのように機能します。この記事では、そのままではプレースホルダー属性をサポートしていないテキストにプレースホルダーを追加する方法を説明します。

必要なコード

div[contenteditable] {
  &[placeholder]:empty::before {
    content: attr(placeholder);
    z-index: 9;
    line-height: 1.7;
    color: #555;
    word-break: break-all;
    user-select: none;
  }

  &[placeholder]:empty:focus::before {
    content: "";
  }
}

必要なコードはこれですべてです。ただし、それを CSS に追加しただけでは機能しません。 HTML にプレースホルダー属性を追加し、div が表示されていることを確認する必要があります。

完全なコード / 例

HTML

CSS

div[contenteditable] {
  /* Basic styles */
  width: 20rem;
  height: 15rem;
  padding: 1rem;
  background: #292929;
  color: #fff;

  /* Placeholder code */
  &[placeholder]:empty::before {
    content: attr(placeholder);
    z-index: 9;
    line-height: 1.7;
    color: #555;
    word-break: break-all;
    user-select: none;
  }

  &[placeholder]:empty:focus::before {
    content: "";
  }
}

これで終わりです。お役に立てば幸いです!