HTML5 - L'attribut contenteditable
Nouvelle série de billets liée à HTML5 et aux nouveautés apportées par le W3C (organisme qui gère les normes du World Wide Web) sur le langage le plus utilisée sur internet: HTML.
Si la norme HTML5 n'est pas encore publiée de façon définitive, le Working Draft publié en Janvier 2008 est toute fois supporté (de façon plus ou moins efficace) par la majorité des navigateurs web actuels (au moins les meilleurs).
Aujourd'hui, le but de l'article est d'appréhender un nouvel attribut, 'contenteditable', proposé par cette future norme.
Présentation
L'attribut 'contenteditable' peut être associé à un élément HTML (ou balise) et placé à deux valeurs: 'false' (par défaut) et 'true' afin d'en rendre l'édition possible. Cette édition se contonnant, sans autre artifice, à une modification locale. Il ne s'agit pas d'un attribut magique qui autoriserait à lui seul à rendre une page éditable pour que les modifications apportées soient ensuites visibles par toutes les personnes chargeant la même page. Toutefois, rien empêche de se servir de cet attribut à cette fin, mais ce sera au développeur de prévoir les échanges lorsqu'un changement est réalisé sur la page.
'contenteditable' est aussi associé à une valeur et un getter IDL (Interface Definition Language) du DOM (Document Object Model):
- 'contentEditable' qui accepte les valeurs 'true' ou 'false'
- 'isContentEditable' qui retourne les valeurs 'true' ou 'false'
Utilisation
Rien de plus simple, puisqu'il suffit de placer l'attribut et sa valeur dans la déclaration de la balise concernée pour la rendre éditable:
<p contenteditable="true">Lorem ipsum dolor...</p>
En concret:
Lorem ipsum dolor...
Afin de se servir des changements effectués, un certains nombre d'écouteurs peuvent être positionnés. Ceux-ci, réagissants aux évènements émis, peuvent ainsi renseigner sur l'état de l'élément HTML:
- 'focus' au moment où l'utilisateur sélectionne une zone éditable par un click.
- 'blur' au moment où l'utilisateur quitte la zone (après édition par exemple).
Que l'on peut par exemple écouter comme suit afin d'appeler la méthode 'store' lorsque l'élément 'element' est modifié:
editable = document.getElementById('element');
editable.addEventListener("blur", store, false);
Autour de cet attribut
L'attribut 'contenteditable' présenté plus tôt dans cet article accompagne d'autres attributs relativement liés à celui-ci
designMode
L'attribut IDL designMode accepte lui aussi deux valeurs. Mais ce sont 'on' et 'off' (par défaut) pour changer. Cet attribut, normalement associé à l'élément 'document.' permet de rendre modifiable l'intégralité d'un document HTML (ou page).
document.designMode = 'true';
spellcheck
'spellcheck' permet quant à lui permet d'activer ou de désactiver la correction orthographique ou grammaticale sur les éléments modifiables d'une page. Utilisant les valeurs 'true' et 'false' et associé à l'attribut 'contenteditable' il permet de créer une zone d'édition efficace dans un élément non prévu initialement à cet effet.
document.body.spellcheck = 'true';
Tester
Afin que vous puissiez mieux comprendre comment marchent les attributs 'contenteditable' et 'spellcheck', j'ai réalisé une petite démo très simple: Tester ces attributs.
