Selles artiklis käsitletakse sisu muudetavate muudatuste käsitlemist JavaScriptis ja selgitatakse seda näite abil.
Kuidas käsitleda sisu muudetavaid muudatusi JavaScriptis?
Contenteditable on loendatud atribuut. Kasutaja saab teha sisus muudatusi vastavalt oma vajadustele. Kui see on lubatud, muudab brauser oma vidinat, et võimaldada elementide muutmist.
Millised väärtused on rahuloleva muudatuse puhul lubatud?
Sisalduv väärtus võib võtta ühe järgmistest väärtustest:
- ainult lihttekst tähistab, et originaalteksti saab redigeerida, kuigi rikasteksti vorming on keelatud.
- Tühi string või tõene, mis tähendab, et elementi saab redigeerida.
- vale, mis tähendab, et elementi ei saa redigeerida.
Näide
Järgmine näide selgitab, kuidas saab veebilehel redigeeritavat sisu kasutada. Selle paremaks mõistmiseks vaatame allolevat koodi:
HTML
Siin on HTML-kood, mis selgitab sisuliselt muudetavate muudatussündmuste kasutamist:
< plokktsitaat rahulolev = 'tõsi' >
< h3 > MUUDAGE OMA SISU SIIN! < / h3 >
< / plokktsitaat >
Ülaltoodud HTML-koodis:
- Blockquote silt luuakse atribuudiga contenteditable seatud väärtusele Tõene. See võimaldab redigeerida blockquote märgendi sisu.
- H3 silt on blockquote märgendi sees. See ütleb 'EDIT SISU SIIN!', kuna see asub
sees, mis tähendab, et kasutaja saab sisu redigeerida.
CSS
Koodi visuaalselt atraktiivseks muutmiseks oleme kasutanud järgmist CSS-koodi:
plokktsitaat {
taustal : virsikupuhv ;
piiriraadius : 10 pikslit ;
marginaal : 10 pikslit ;
}
tsitaat h3 {
polsterdus : 10 pikslit ;
}
Ülaltoodud CSS-koodis:
- Plokktsitaadi märgendi taust on seatud virsikuvärvi, äärise raadiusega 10 pikslit ja veerisega 10 pikslit.
- Jutumärgi sees oleva h3 päise täidis on 10 pikslit.
Väljund :
Järgmine väljund selgitab, kuidas sisu saab redigeerida JavaScriptis sisuredigeeritava muudatuse sündmuse abil:
Sisu redigeerimise tähtsus
- Suurenenud interaktiivsus, kuna kasutaja saab sisu mugavalt muuta.
- Mugav kohandamine, kuna programmeerija JavaScripti abil võib luua muudetud käitumisi, näiteks automaatset salvestamist, käivitades kasutaja sisendi põhjal erinevaid toiminguid.
- Aitab muuta redigeerimisprotsessi sujuvamaks, võimaldades kasutajal dünaamiliselt redigeerida, ilma et oleks vaja eraldi tekstivälja.
Järeldus
JavaScripti sisuredigeeritavad muudatussündmused võimaldavad kasutajal sisu muuta, muutes veebilehe tundlikuks ja kohandatavaks. See sillutab teed kasutajakesksele veebiarendusele, kus kasutaja saab veebilehe sisu reaalajas redigeerida, võimaldades kasutajakogemust paremini reageerida. Selles artiklis käsitleti sisu muudetavate muudatuste käsitlemist JavaScriptis ja selgitati seda näite abil.