Vous avez peut-être rencontré l'attribut contenteditable. Il est utilisé dans de nombreux endroits. C'est une bien meilleure alternative à quelque chose comme une zone de texte. Vous pouvez ajouter contenteditable="true" à n'importe quel div et il agit alors comme un champ de saisie. Dans cet article, je vais vous montrer comment ajouter un espace réservé au texte, car il ne prend pas en charge l'attribut espace réservé dès la sortie de la boîte.

Le code nécessaire

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

C'est tout le code dont vous avez besoin ! Cependant, si vous ajoutez uniquement cela au CSS, cela ne fonctionnera pas. Vous devez ajouter un attribut d'espace réservé à votre code HTML et vous assurer également que le div est visible.

Code complet / Exemple

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

C'est tout ce qu'on peut en dire. J'espère que cela vous sera utile !