Contenteditable-ominaisuuden käyttäminen
Tekstin tekeminen käyttäjien muokattavaksi verkkosivustoksi on helpompaa kuin odotit. HTML antaa attribuutin tähän tarkoitukseen: contenteditable.
Sisältökelpoinen attribuutti otettiin ensimmäisen kerran käyttöön vuonna 2014 julkaisemalla HTML5 . Se määrittää, voidaanko sivuston kävijä muuttaa selaimen sisältämää sisältöä.
Tuki Contenteditable-attribuutille
Useimmat nykyaikaiset selaimet tukevat ominaisuutta.
Nämä sisältävät:
- Chrome 4.0 ja uudempi
- Internet Explorer 6 ja uudemmat
- Firefox 3.5 ja uudempi
- Safari 3.1 ja uudempi
- Opera 10.1 ja uudemmat
- Microsoft Edge
Sama koskee useimpia mobiiliselaimia.
Kuinka käyttää sisältöä
Lisää attribuutti HTML-elementtiin, jonka haluat muokata. Siinä on kolme mahdollista arvoa: totta, väärä ja perintö. Perimä on oletusarvo, eli elementti ottaa sen vanhemman arvon. Vastaavasti muokattavan sisällön kaikki lapsielementit ovat myös muokattavissa, paitsi jos muutat arvoja vääriksi. Esimerkiksi jotta DIV-elementti voidaan muokata, käytä:
Luo muokattava tehtäväluettelo sisällöllisesti
Muokattava sisältö on järkevämpää, kun yhdistät sen paikalliseen tallennustilaan, joten sisältö jatkuu istuntojen ja sivustokäyntien välillä.
- Avaa sivu HTML-editorissa.
- Luo luettelotut, järjestämättömät luettelot myTasks :
- Jotkut tehtävät
- Toinen tehtävä
- Jotkut tehtävät
- Lisää contentatable attribuutti
- -elementtiin:
Sinulla on nyt tehtäväluettelo, joka on muokattavissa - mutta jos suljet selaimen tai poistat sivun, luettelosi katoaa. Ratkaisu: Lisää yksinkertainen käsikirjoitus tehtävien tallentamiseen localStorageen. - Lisää linkki jQueryyn -asiakirjallasi.