files/fr/web/guide/html/editable_content/index.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

---
title: Contenu éditable
slug: Web/Guide/HTML/Editable_content
translation_of: Web/Guide/HTML/Editable_content
original_slug: Web/HTML/Contenu_editable
---
<h2 id="Introduction">Introduction</h2>
<p>Chaque élément du HTML5 peut être éditable. Cette fonctionnalité a été introduite longtemps auparavant mais a maintenant été standarisée avec <a class="external" href="http://www.whatwg.org/">WHATWG</a> (<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable">voir la spécification HTML actuelle</a>). Avec des gestionnaires d'événements JavaScript, vous pouvez transformer votre page Web en un éditeur de texte, complet et rapide.</p>
<h2 id="Compatibilité">Compatibilité</h2>
<p>Le contenu éditable est entièrement compatible avec les navigateurs actuels :</p>
<ul>
  <li>Firefox 3.5+</li>
  <li>Chrome 6.0+</li>
  <li>Internet Explorer 6.0+</li>
  <li>Safari 3.2+</li>
  <li>Opera 8+</li>
  <li>iOS Safari 5.0+</li>
  <li>Android Browser 3.0+</li>
</ul>
<p>Ce n'est pas encore supporté par Opera Mini et Opera Mobile.</p>
<h2 id="Comment_ça_marche">Comment ça marche ?</h2>
<p>Fixez l'attribut <code>contenteditable</code> à <code>true</code> dans votre élément HTML. Ça peut être fait dans quasiment tous les éléments HTML.</p>
<h2 id="Exemples">Exemples</h2>
<p>Un exemple simple :</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;
    &lt;div contenteditable="true"&gt;
      Ce texte peut être édité par l'utilisateur.
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt; </pre>
<p>Vous pouvez observer un exemple concret intégrant JavaScript utilisant LocalStorage <a class="external" href="http://html5demos.com/contenteditable">ici</a>. Le code source est disponible <a href="http://html5demos.com/contenteditable#view-source">ici</a>.</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<p><a href="/fr/docs/Midas" title="en/Midas">Comment interagir avec le contenu </a>(style proche de l'ancienne API Internet Explorer) ou encore <a href="/fr/docs/Rich-Text_Editing_in_Mozilla" title="en/rich-text editing in mozilla">ici</a>.</p>
<div>
  {{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }}</div>