Niveau : Débutant

Attributs globaux hidden, contenteditable, contextmenu, spellcheck

Tutoriel par (Art Director & Creative Designer, Paris)
Créé le , mis à jour le (8449 lectures)
Tags : attributs, spellcheck, contextmenu, contenteditable, hidden

Sommaire


Attribut contenteditable

Sans surprise, l'attribut contenteditable permet de préciser si le contenu de l'élément peut être édité ou non. Il s'agit d'une fonctionnalité répondant à la demande du web participatif : tout un chacun doit pouvoir éditer en ligne du contenu, le mettre en forme, sans posséder de grandes connaissances en HTML. L'objectif est de proposer des éditeurs WYSIWYG en ligne.

En revanche, la seule présence de l'attribut ne rajoute pas de barre de contrôle et de mise en forme (par exemple des boutons gras, insertion d'images, alignement de texte, etc). Il faut confier cette gestion à un script complémentaire, tel que CKEditor ou en concevoir un sur mesure afin d'injecter dans le DOM le code source souhaité.

Syntaxe

<element contenteditable="true|false">...</element>

Habituellement appliqué à un élément de type conteneur, l'attribut contenteditable le transforme en zone éditable, donnant le focus au curseur. Après modification, l'intérêt est de récupérer ce contenu grâce à la propriété innerHTML et de le transmettre au serveur par une quelconque méthode, par exemple en AJAX.

Valeurs possibles

  • true : indique que l'élément est éditable
  • false : indique que l'élément n'est pas éditable (par défaut)

Démonstration

<p contenteditable="true">Le contenu est directement éditable par un visiteur</p>

Démonstration

Récupérer la valeur de l'élément édité

La propriété innerHTML est très pratique pour retrouver le contenu de l'élément HTML.

<script>
var contenu = document.getElementById('id-element').innerHTML;
</script>

Prise en charge

Navigateurs Versions
Internet Explorer Internet Explorer 5.5+
Firefox Firefox 3.5+
Chrome Chrome 3+
Safari Safari 3.1+
Opera Opera 10+