Möglicherweise sind Sie auf das contenteditable-Attribut gestoßen. Es wird an vielen Orten verwendet. Es ist eine viel bessere Alternative zu so etwas wie einem Textbereich. Sie können contenteditable="true" zu jedem Div hinzufügen und es verhält sich dann wie ein Eingabefeld. In diesem Artikel zeige ich Ihnen, wie Sie Platzhalter zum Text hinzufügen, da dieser das Platzhalterattribut nicht sofort unterstützt.

Der benötigte Code

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: "";
  }
}

Das ist alles, was Sie an Code brauchen! Wenn Sie das jedoch nur zum CSS hinzufügen, funktioniert es nicht. Sie müssen Ihrem HTML ein Platzhalterattribut hinzufügen und außerdem sicherstellen, dass das Div sichtbar ist.

Vollständiger Code/Beispiel

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: "";
  }
}

Das ist alles dazu. Ich hoffe, Sie finden es nützlich!