Utilizând atributul Contenteditable
Efectuarea textului pe un site web editabil de utilizatori este mai ușor decât v-ați aștepta. HTML oferă un atribut pentru acest scop: contenteditable.
Atributul Contenteditable a fost introdus pentru prima dată în 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ștenit. Moștenirea este valoarea implicită, adică elementul preia 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 false. De exemplu, pentru a face un element DIV 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.
- Deschideți pagina într-un editor HTML.
- Creați o listă neagrată, numită myTasks :
- Unele sarcini
- O altă sarcină
- Unele sarcini
- Adăugați atributul contenteditable elementului
- :
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. - Adăugați un link la jQuery în al documentului.