Contenu éditable

par 2 contributeurs :

Introduction

Chaque élément du HTML5 peut être éditable. Cette fonctionnalité a été introduite longtemps auparavant mais a maintenant été standarisée avec WHATWG (voir la spécification HTML actuelle). Avec des gestionnaires d'événements JavaScript, vous pouvez transformer votre page Web en un éditeur de texte, complet et rapide.

Compatibilité

Le contenu éditable est entièrement compatible avec les navigateurs actuels :

  • Firefox 3.5+
  • Chrome 6.0+
  • Internet Explorer 6.0+
  • Safari 3.2+
  • Opera 8+
  • iOS Safari 5.0+
  • Android Browser 3.0+

Ce n'est pas encore supporté par Opera Mini et Opera Mobile.

Comment ça marche ?

Fixez l'attribut contenteditable à true dans votre élément HTML. Ça peut être fait dans quasiment tous les éléments HTML.

Exemples

Un exemple simple :

<!DOCTYPE html>
<html>
  <body>
    <div contenteditable="true">
      Ce texte peut être édité par l'utilisateur.
    </div>
  </body>
</html> 

Vous pouvez observer un exemple concret intégrant JavaScript utilisant LocalStorage ici. Le code source est disponible ici.

Voir aussi

Comment interagir avec le contenu (style proche de l'ancienne API Internet Explorer) ou encore ici.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : tregagnon, SphinxKnight
Dernière mise à jour par : tregagnon,