Efectuarea unui conținut web care poate fi modificat de vizitatorii site-ului

Efectuarea textului pe un site web editabil de utilizatori este mai ușor decât v-ați aștepta. HTML oferă un atribut în acest scop: contenteditable.

contenteditable atributul a fost introdus pentru prima data in 2014 cu lansarea HTML5. Specifică dacă conținutul pe care îl guvernează poate fi modificat de un vizitator al site-ului din browser.

Sprijin pentru atributul Contenteditable

Cele mai moderne browsere desktop acceptă atributul. Acestea includ:

• Chrome 4.0 și mai sus
• Internet Explorer 6 și în sus
• Firefox 3.5 și în sus
• Safari 3.1 și în sus
• Opera 10.1 și mai sus
• Microsoft Edge

Același lucru este valabil și pentru cele mai multe browsere mobile.

Cum se utilizează Contenteditable

Pur și simplu adăugați atributul elementului HTML pe care doriți să-l editați. Are trei valori posibile:Adevărat, fals și moşteni. Moşteni este valoarea implicită, ceea ce înseamnă că elementul ia valoarea părintelui său. De asemenea, toate elementele copilului din conținutul dvs. nou editat vor fi de asemenea editate dacă nu le modificați valorile fals. De exemplu, pentru a face o DIV element editabil, utilizați:

Creați o listă de modificări care să poată fi modificată

Conținutul editabil are cea mai mare importanță atunci când îl împerecheați cu spațiul de stocare local, astfel încât conținutul să persiste între sesiuni și vizite pe site.

1. Deschideți pagina într-un editor HTML.
2. Creați o listă marcată, neordonată numită sarcinile mele:
   2. Unele sarcini
   4. O altă sarcină
5. Adaugăcontenteditable atribut la
   element:
   Aveți acum o listă de sarcini care poate fi editată - dar dacă închideți browserul sau părăsiți pagina, lista dvs. va dispărea. Soluția: Adăugați un script simplu pentru salvarea sarcinilor la localStorage.
8. Adăugați un link către jQuery în din documentul dvs. Acest exemplu utilizează Google CDN, dar îl puteți gazdui singur sau puteți utiliza un alt CDN dacă preferați.
11. În partea de jos a paginii dvs., chiar deasupra tag, adăugați scriptul: Acesta este începutul jQuery document.ready și îi spune browserului să încarce acest script după ce documentul sa încărcat complet.

În interiorul document.ready adăugați scriptul pentru a încărca sarcinile în localStorage și pentru a obține toate sarcinile salvate anterior: $ (document.ready (funcția () {

1. $ ("# myTasks"). blur (funcția () {// atunci când cursorul părăsește elementul #myTasks
4. localStorage.setItem ('myTasksData', this.innerHTML); // salvați la localStorage
7. });
10. dacă (localStorage.getItem ('myTasksData')) {// dacă există conținut în localStorage
13. $ ( "# MyTasks") html (localStorage.getItem ( 'myTasksData')).; // pune conținut pe pagină
16. }
17. });

HTML pentru întreaga pagină arată astfel:

Sarcinile mele

Introduceți elemente pentru lista dvs. Browserul îl va păstra pentru dvs., astfel încât atunci când redeschideți browserul dvs., acesta va rămâne aici.

• Unele sarcini
• O altă sarcină