Rendere il contenuto della pagina Web modificabile dai visitatori del sito

Rendere il testo su un sito web modificabile dagli utenti è più facile di quanto ci si potrebbe aspettare. HTML fornisce un attributo per questo scopo: contenteditable.

Il contenteditable l'attributo è stato introdotto per la prima volta nel 2014 con il rilascio di HTML5. Specifica se il contenuto che governa può essere modificato da un visitatore del sito all'interno del browser.

Supporto per l'attributo Contenteditable

La maggior parte dei browser desktop moderni supporta l'attributo. Questi includono:

• Chrome 4.0 e versioni successive
• Internet Explorer 6 e versioni successive
• Firefox 3.5 e versioni successive
• Safari 3.1 e versioni successive
• Opera 10.1 e versioni successive
• Microsoft Edge

Lo stesso vale per la maggior parte dei browser mobili.

Come usare Contenteditable

Basta aggiungere l'attributo all'elemento HTML che si desidera rendere modificabile. Ha tre valori possibili:vero, falso e ereditare. Ereditare è il valore predefinito, il che significa che l'elemento assume il valore del suo genitore. Allo stesso modo, qualsiasi elemento figlio del contenuto appena modificato sarà anche modificabile a meno che non si cambino i loro valori in falso. Ad esempio, per fare un DIV elemento modificabile, utilizzare:

Crea una lista di cose da fare modificabili con Contenteditable

Il contenuto modificabile ha più senso quando lo si abbina alla memoria locale, quindi il contenuto persiste tra le sessioni e le visite al sito.

1. Apri la tua pagina in un editor HTML.
2. Crea un elenco puntato, non ordinato chiamato i miei compiti:
   2. Qualche compito
   4. Un altro compito
5. Aggiungi ilcontenteditable attributo al
   elemento:
   Ora hai un elenco di cose che è modificabile, ma se chiudi il browser o lasci la pagina, l'elenco scomparirà. La soluzione: aggiungere un semplice script per salvare le attività su localStorage.
8. Aggiungi un collegamento a jQuery nel del tuo documento. Questo esempio utilizza il CDN di Google, ma puoi ospitarlo tu stesso o utilizzare un altro CDN se preferisci.
11. Nella parte inferiore della pagina, appena sopra il tag, aggiungi il tuo script: Questo è l'inizio di jQuery document.ready funzione e dice al browser di caricare questo script dopo che il documento è stato caricato completamente.

Dentro il document.ready funzione, aggiungi lo script per caricare le attività in localStorage e ottieni le attività precedentemente salvate: $ (document.ready (function () {

1. $ ("# myTasks"). blur (function () {// quando il cursore lascia l'elemento #myTasks
4. localStorage.setItem ('myTasksData', this.innerHTML); // salva in localStorage
7. });
10. if (localStorage.getItem ('myTasksData')) {// se c'è contenuto nel localStorage
13. $ ( "#" MyTasks) html (localStorage.getItem ( 'myTasksData')).; // metti il ​​contenuto sulla pagina
16. }
17. });

L'HTML per l'intera pagina ha il seguente aspetto:

I miei compiti

Inserisci gli articoli per il tuo elenco. Il browser lo memorizzerà per te, in modo che quando riapri il browser, sarà ancora qui.

• Qualche compito
• Un altro compito