Attribut HTML contenteditable
L'attribut contenteditable indique si le contenu d'un élément est modifiable. Valeurs, gestion JavaScript et conseils d'accessibilité.
L'attribut HTML contenteditable indique si le contenu d'un élément est modifiable directement dans le navigateur. Lorsqu'il est activé, l'utilisateur peut cliquer à l'intérieur de l'élément et saisir, supprimer et mettre en forme du texte comme dans un traitement de texte — sans <input> ni <textarea>.
Comme il fonctionne sur presque n'importe quel élément, contenteditable peut transformer un <div>, un <p> ou une section entière en surface d'édition. Il fait partie des Attributs globaux et est donc disponible sur tout élément HTML.
Quand utiliser contenteditable
contenteditable est la base de l'édition en page. On le retrouve derrière :
- Les éditeurs de texte enrichi (les zones « WYSIWYG » dans les CMS, les clients de messagerie et les formulaires de commentaires). Contrairement à un
<textarea>, un élément modifiable peut contenir du véritable HTML — texte en gras, liens, listes et images — de sorte que l'utilisateur voit le rendu formaté au fil de la frappe. - L'édition en ligne — permettre à un utilisateur de cliquer sur un titre ou une cellule de tableau pour le renommer directement, sans ouvrir de formulaire séparé.
- Les interfaces d'aperçu en direct et de prise de notes, où la zone d'édition est le résultat rendu.
Choisissez un <textarea> ou un <input> lorsque vous n'avez besoin que de texte brut soumis avec un formulaire : ce sont de vrais champs de formulaire, ils se valident et publient leur valeur automatiquement. Optez pour contenteditable lorsque vous avez besoin de contenu formaté (HTML) ou que vous souhaitez que la modification s'effectue à l'intérieur de la mise en page existante.
Syntaxe
<tag contenteditable="true">...</tag>L'attribut accepte les valeurs suivantes :
| Valeur | Signification |
|---|---|
true (ou "") | L'élément est modifiable. Une chaîne vide se comporte de la même façon que true. |
false | L'élément n'est pas modifiable. |
inherit | L'élément hérite de l'état modifiable de son parent le plus proche. C'est également la valeur par défaut lorsque l'attribut est omis. |
plaintext-only | L'élément est modifiable mais la mise en forme de texte enrichi est désactivée — seul le texte brut est accepté. Pris en charge par les navigateurs modernes, mais vérifiez la compatibilité avant de vous en servir. |
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p contenteditable="false">
This is a paragraph. It is not editable.
</p>
<p contenteditable="true">
This is a paragraph. It is editable. Try to change this text.
</p>
</body>
</html>Héritage avec la valeur inherit
Lorsque vous ne définissez pas contenteditable sur un élément enfant, celui-ci hérite de l'état modifiable de son parent. Vous pouvez rendre toute une région modifiable au niveau du parent, puis exclure un enfant spécifique avec contenteditable="false" :
<!DOCTYPE html>
<html>
<head>
<title>contenteditable inherit example</title>
</head>
<body>
<div contenteditable="true">
<p>This paragraph inherits editing from the div, so you can change it.</p>
<p contenteditable="false">
This paragraph opts out — it is locked and cannot be edited.
</p>
<p contenteditable="inherit">
This one explicitly inherits, so it is editable again.
</p>
</div>
</body>
</html>Lire et enregistrer le contenu modifié avec JavaScript
Un élément contenteditable n'est pas un champ de formulaire : sa valeur n'est pas soumise avec un formulaire et il n'existe pas de propriété value. Vous lisez le contenu directement depuis l'élément :
element.innerHTML— le contenu modifié au format HTML (conserve le gras, les liens, les listes).element.textContent— le contenu modifié en texte brut (mise en forme supprimée).
Pour réagir aux modifications au fur et à mesure, écoutez l'événement input, qui se déclenche à chaque changement :
<!DOCTYPE html>
<html>
<head>
<title>Save editable content</title>
</head>
<body>
<div id="editor" contenteditable="true">
Edit me, then reload the page.
</div>
<script>
const editor = document.getElementById("editor");
// Restore any previously saved content.
const saved = localStorage.getItem("note");
if (saved !== null) {
editor.innerHTML = saved;
}
// Save on every edit.
editor.addEventListener("input", () => {
localStorage.setItem("note", editor.innerHTML);
// In a real app you would debounce this and POST it to a server, e.g.
// fetch("/api/save", { method: "POST", body: editor.innerHTML });
});
</script>
</body>
</html>Enregistrer innerHTML directement sur un serveur stocke du HTML brut. Assainissez toujours le HTML non fiable côté serveur (ou avec une bibliothèque cliente approuvée) avant de le sauvegarder ou de le réafficher, afin de prévenir les attaques de type cross-site scripting (XSS).
Accessibilité
Un élément contenteditable ordinaire semble modifiable mais, contrairement à un vrai champ de formulaire, il n'expose aucune sémantique de champ aux technologies d'assistance — les lecteurs d'écran peuvent ne pas l'annoncer comme un élément dans lequel l'utilisateur peut saisir du texte. Lorsque vous créez un éditeur personnalisé, aidez-les :
- Ajoutez
role="textbox"pour qu'il soit annoncé comme un champ de texte modifiable. Ajoutezaria-multiline="true"s'il accepte plusieurs lignes. - Ajoutez un
aria-label(ou associez un<label>visible viaaria-labelledby) pour que le champ ait un nom accessible. - Ajoutez
tabindex="0"si l'élément n'est pas naturellement focalisable, afin que les utilisateurs clavier puissent l'atteindre.
<div
contenteditable="true"
role="textbox"
aria-multiline="true"
aria-label="Comment"
tabindex="0"
>
Type your comment…
</div>Incohérences entre navigateurs
contenteditable est puissant, mais son comportement n'est pas uniforme d'un navigateur à l'autre — c'est la principale raison pour laquelle les applications en production s'appuient généralement sur une bibliothèque (ou utilisent plaintext-only) plutôt que sur contenteditable brut :
- Le balisage de la touche Entrée diffère. Appuyer sur Entrée peut encapsuler une nouvelle ligne dans un
<div>, un<p>ou insérer un<br>, selon le navigateur. Ne présumez pas de la structure HTML générée. - Le collage amène souvent des styles et des balises provenant de la source ; vous devrez peut-être intercepter l'événement
pasteet nettoyer le contenu. plaintext-onlydésactive la mise en forme enrichie mais n'est pas pris en charge partout — détectez la fonctionnalité avant de vous y fier.
Attributs associés
spellcheck— activer ou désactiver la vérification orthographique du navigateur dans une zone modifiable.draggable— contrôler si un élément peut être déplacé par glisser-déposer.- Attributs globaux — l'ensemble complet des attributs utilisables sur n'importe quel élément.