Rendre le contenu de page Web modifiable par les visiteurs du site

Rendre le texte sur un site Web modifiable par les utilisateurs est plus facile que vous ne le pensiez. HTML fournit un attribut à cette fin: contenteditable.

le contenteditable Cet attribut a été introduit pour la première fois en 2014 avec la sortie de HTML5. Il spécifie si le contenu qu'il régit peut être modifié par un visiteur du site à partir du navigateur.

Prise en charge de l'attribut Contenteditable

La plupart des navigateurs de bureau modernes prennent en charge cet attribut. Ceux-ci inclus:

• Chrome 4.0 et plus
• Internet Explorer 6 et plus
• Firefox 3.5 et plus
• Safari 3.1 et plus
• Opera 10.1 et plus
• Microsoft Edge

Il en va de même pour la plupart des navigateurs mobiles.

Comment utiliser Contenteditable

Ajoutez simplement l'attribut à l'élément HTML que vous souhaitez rendre modifiable. Il a trois valeurs possibles:vrai, faux et hériter. Hériter est la valeur par défaut, ce qui signifie que l'élément prend la valeur de son parent. De même, tous les éléments enfants de votre contenu nouvellement éditable le seront aussi, sauf si vous modifiez leurs valeurs en faux. Par exemple, pour faire un DIV élément éditable, utiliser:

Créer une liste de tâches modifiable avec Contenteditable

Le contenu modifiable a plus de sens lorsque vous l'associez à un stockage local, il reste donc entre les sessions et les visites de site.

1. Ouvrez votre page dans un éditeur HTML.
2. Créer une liste à puces, non ordonnée, nommée mes tâches:
   2. Une tâche
   4. Une autre tâche
5. Ajouter lecontenteditable attribuer à la
   élément:
   Vous avez maintenant une liste de tâches modifiable, mais si vous fermez votre navigateur ou quittez la page, votre liste disparaîtra. La solution: ajoutez un script simple pour enregistrer les tâches sur localStorage.
8. Ajouter un lien vers jQuery dans le de votre document. Cet exemple utilise Google CDN, mais vous pouvez l'héberger vous-même ou utiliser un autre CDN si vous préférez.
11. Au bas de votre page, juste au-dessus du tag, ajoutez votre script: C'est le début de la jQuery document.ready fonction et indique au navigateur de charger ce script une fois le document chargé.

À l'intérieur de document.ready fonction, ajoutez votre script pour charger les tâches dans localStorage et obtenir toutes les tâches qui y ont été enregistrées précédemment: $ (document.ready (function () {

1. $ ("# myTasks"). blur (function () {// lorsque le curseur quitte l'élément #myTasks
4. localStorage.setItem ('myTasksData', this.innerHTML); // enregistrer dans le stockage local
7. });
10. if (localStorage.getItem ('myTasksData')) {// s'il y a du contenu dans le localStorage
13. $ ("# myTasks"). html (localStorage.getItem ('myTasksData')); // mettre le contenu sur la page
16. }
17. });

Le code HTML de la page entière ressemble à ceci:

Mes tâches

Entrez les éléments de votre liste. Le navigateur le stockera pour vous. Ainsi, lorsque vous rouvrirez votre navigateur, il sera toujours là.

• Une tâche
• Une autre tâche