Ajoutez du texte d'espace réservé au div avec contenteditable=\'true\'

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

<div contenteditable="true" placeholder="Subscribe to Axorax on YT! :D"></div>

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'il y a à dire. J'espère que cela vous sera utile !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!