L'attribut universelcontenteditable est un attribut énuméré qui indique si l'élément doit être éditable par l'utilisateur·ice. Si c'est le cas, le navigateur modifie son widget pour permettre l'édition.

Exemple interactif

<blockquote contenteditable="true">  <p>Éditez ce contenu pour ajouter votre propre citation</p></blockquote><cite contenteditable="true">-- Écrivez votre propre nom ici</cite>

blockquote {  background: #eeeeee;  border-radius: 5px;  margin: 16px 0;}blockquote p {  padding: 15px;}cite {  margin: 16px 32px;  font-weight: bold;}blockquote p::before {  content: "\201C";}blockquote p::after {  content: "\201D";}[contenteditable="true"] {  caret-color: red;}

Valeurs

Les valeurs autorisées pour cet attribut sont :

• true, ou lachaîne de caractères vide qui indiquent que l'élément est éditable.
• false, qui indique que l'élément ne peut pas être édité.
• plaintext-only, qui indique que le texte brut de l'élément est éditable, mais que la mise en forme riche est désactivée.

Si l'attribut est donné sans valeur, comme<label contenteditable>Exemple d'étiquette</label>, sa valeur est traitée comme une chaîne de caractères vide.

Si cet attribut est absent ou si sa valeur est invalide, sa valeur esthéritée de son élément parent : l'élément est donc éditable si son parent l'est.

Notez que bien que ses valeurs autorisées incluenttrue etfalse, cet attribut est un attributénuméré et non un attributbooléen.

Vous pouvez définir la couleur utilisée pour dessiner lecaret d'insertion du texte avec la propriété CSScaret-color.

Les éléments rendus éditables, et donc interactifs, à l'aide de l'attributcontenteditable peuvent être sélectionnés. Ils participent à la navigation clavier séquentielle. Cependant, les éléments avec l'attributcontenteditable imbriqués dans d'autres élémentscontenteditable ne sont pas ajoutés à la séquence de tabulation par défaut. Vous pouvez ajouter les élémentscontenteditable imbriqués à la séquence de navigation clavier en spécifiant la valeurtabindex (tabindex="0").

Si du contenu est collé dans un élément aveccontenteditable="true", toute la mise en forme est conservée. Si du contenu est collé dans un élément aveccontenteditable="plaintext-only", toute la mise en forme est supprimée.

Exemples

Coller du contenu danscontenteditable

Cet exemple comporte deux éléments<div> aveccontenteditable, le premier avec la valeurtrue et le second avec la valeurplaintext-only. Copiez le contenu ci-dessous et collez-le dans chaquediv pour voir leurs effets.

HTML

<h2>Contenu à copier</h2><p>  Copiez tout le texte du bloc ci-dessous et collez-le dans chacun des blocs  contenteditable pour comparer les résultats.</p><section>  <div>    <p>      Ceci est un paragraphe contenant <strong>Gras</strong>,      <em>Italique</em> et du texte <span>rouge</span>, suivi d'une      liste ordonnée&nbsp;:    </p>    <ol>      <li>Étape un</li>      <li>Étape deux</li>      <li>Étape trois</li>    </ol>  </div></section>

<h2>Pasting areas</h2><section>  <div>    <h3>contenteditable="true"</h3>    <div contenteditable="true"></div>  </div>  <div>    <h3>contenteditable="plaintext-only"</h3>    <div contenteditable="plaintext-only"></div>  </div></section>

h2 {  margin-bottom: 0;}.copying {  font-family: "Georgia", serif;  margin: 1rem;  padding: 1rem;  border: solid black 1px;}.red {  color: red;}.pasting {  display: flex;  flex-direction: row;  gap: 1rem;  width: 100%;  .wrapper {    flex: 1 1;    margin: 0;    padding: 0;  }  h3 {    font-family: monospace;  }  [contenteditable] {    min-height: 3rem;    border: solid 1px;    padding: 0.5rem;    background-color: whitesmoke;  }  [contenteditable="true"] {    caret-color: blue;  }  [contenteditable="plaintext-only"] {    caret-color: red;  }}

Spécifications

Compatibilité des navigateurs

Voir aussi

• Tous les attributs universels
• Les propriétés DOMHTMLElement.contentEditable etHTMLElement.isContentEditable
• La propriété CSScaret-color
• L'évènementinput pour l'objet DOMHTMLElement