Fer contingut de la pàgina web editable pels visitants del lloc

Fer el text d'un lloc web editable pels usuaris és més fàcil del que podríeu esperar. HTML proporciona un atribut amb aquest propòsit: contenteditable.

El contenteditable L'atribut es va introduir per primera vegada el 2014 amb l'alliberament d'HTML5. Especifica si el visitant del lloc pot canviar el contingut que regeix des del navegador.

Suport per a l'atribut Contenteditable

La majoria dels navegadors d'escriptori moderns admeten l'atribut. Això inclou:

• Crom 4.0 i superior
• Internet Explorer 6 o superior
• Firefox 3.5 o superior
• Safari 3.1 o superior
• Opera 10.1 o superior
• Microsoft Edge

El mateix passa amb la majoria dels navegadors mòbils.

Com s'utilitza Contenteditable

Simplement afegiu l'atribut a l'element HTML que voleu fer editable. Té tres valors possibles:veritat, fals i heretar. Hereta és el valor predeterminat, el que significa que l'element assumeix el valor del seu pare. De la mateixa manera, tots els elements secundaris del vostre nou contingut editable també seran editables a menys que canviï els seus valors fals. Per exemple, fer una DIV element editable, useu:

Creeu una llista de tasques editables amb Contenteditable

El contingut editable té més sentit quan es vincula amb l'emmagatzematge local, de manera que el contingut persisteix entre sessions i visites al lloc.

1. Obriu la pàgina en un editor HTML.
2. Creeu una llista amb vincles, desordenats, anomenats my Tasks:
   2. Alguna tasca
   4. Una altra tasca
5. Afegiu elcontenteditable atribueix al fitxer
   element:
   Ara teniu una llista de tasques que es pot editar, però si tanqueu el navegador o deixeu la pàgina, la vostra llista desapareixerà. La solució: afegiu un script senzill per desar les tasques a localStorage.
8. Afegiu un enllaç a jQuery al del vostre document. Aquest exemple utilitza Google CDN, però podeu allotjar-lo o utilitzar un altre CDN si ho preferiu.
11. A la part inferior de la pàgina, just a sobre de la etiqueta, afegiu el vostre script: Aquest és el començament de la jQuery document.ready funció i li diu al navegador que carregui aquest script després que el document s'hagi carregat completament.

Dins de la document.ready funció, afegiu el vostre script per carregar les tasques en localStorage i obtingui les tasques que abans es guardaven: $ (document.ready (function () {

1. $ ("# myTasks"). blur (function () (/ / when the cursor abandona l'element #myTasks
4. localStorage.setItem ('myTasksData', this.innerHTML); / / save to localStorage
7. });
10. if (localStorage.getItem ('myTasksData')) (/ / if there is content in the localStorage
13. $ ("# myTasks"). html (localStorage.getItem ('myTasksData')); // posa contingut a la pàgina
16. }
17. });

El codi HTML de tota la pàgina es mostra així:

Les meves tasques

Introduïu els ítems de la vostra llista. El navegador l'emmagatzemarà per a tu, de manera que quan torneu a obrir el vostre navegador, encara estarà aquí.

• Alguna tasca
• Una altra tasca