Kako postupati sa sadržajnim događajima promjena u JavaScriptu

Kako Postupati Sa Sadrzajnim Dogadajima Promjena U Javascriptu



Prilikom izrade responzivne web stranice treba uzeti u obzir sposobnost korisnika da uređuje sadržaj. To korisniku može pružiti besprijekornu korisničku interakciju omogućujući korisniku da izvrši promjene na web stranici u stvarnom vremenu. The sadržajno uređivanje događaji promjena pomažu u upravljanju sadržajem web stranice.

Ovaj članak govori o tome kako rukovati događajima promjene sadržaja u JavaScriptu i objašnjava to uz pomoć primjera.

Kako postupati sa sadržajnim događajima promjena u JavaScriptu?

Contenteditable je nabrojani atribut. Korisnik može mijenjati sadržaj prema svojim zahtjevima. Ako je dopušteno, preglednik mijenja svoj widget kako bi omogućio modificiranje elemenata.







Koje su vrijednosti dopuštene događajem promjene koji se može uređivati?

Contenteditable može uzeti bilo koju od ovih vrijednosti:



  • plaintext-only znači da se izvorni tekst može uređivati ​​iako je formatiranje obogaćenog teksta onemogućeno.
  • Prazan niz ili true što znači da se element može uređivati.
  • false implicirajući da se element ne može uređivati.

Primjer
Sljedeći primjer objašnjava kako se sadržaj koji se može uređivati ​​može koristiti na web stranici. Pogledajmo kod u nastavku da bismo ga bolje razumjeli:



HTML
Evo HTML koda koji objašnjava upotrebu događaja promjene sadržaja koji se mogu uređivati:





< blok citat sadržajno uređivanje = 'pravi' >
< h3 > UREDI SVOJ SADRŽAJ OVDJE! < / h3 >
< / blok citat >

U gornjem HTML kodu:

  • Oznaka blockquote stvara se s atributom contenteditable postavljenim na true. Ovo će omogućiti uređivanje sadržaja unutar oznake blockquote.
  • Oznaka h3 prisutna je unutar oznake blockquote. Piše 'UREDITE SVOJ SADRŽAJ OVDJE!', jer se nalazi unutar
    , što znači da korisnik može uređivati ​​sadržaj.

CSS
Kako bi naš kod bio vizualno privlačan, upotrijebili smo sljedeći CSS kod:



blok citat {
pozadina : breskvica ;
granični radijus : 10 px ;
margina : 10 px ;
}
blok citat h3 {
podstava : 10 px ;
}

U gornjem CSS kodu:

  • Pozadina oznake blok citata postavljena je tako da ima boju breskve s radijusom obruba od 10 piksela i marginom od 10 piksela.
  • Zaglavlje h3 unutar blok citata postavljeno je tako da ima ispunu od 10 piksela.

Izlaz :
Sljedeći rezultat objašnjava kako se sadržaj može uređivati ​​pomoću događaja promjene sadržaja koji se može uređivati ​​u JavaScriptu:

Važnost uređivanja sadržaja

  • Povećana interaktivnost jer korisnik može prikladno mijenjati sadržaj.
  • Praktična prilagodba programera uz pomoć JavaScripta može stvoriti modificirana ponašanja poput automatskog spremanja, pokrećući različite radnje na temelju korisničkog unosa.
  • Pomaže pojednostaviti proces uređivanja omogućujući korisniku dinamičko uređivanje bez potrebe za zasebnim tekstnim poljem.

Zaključak

Događaji promjene sadržaja u JavaScriptu omogućuju korisniku da izmijeni sadržaj čineći web stranicu responzivnom i prilagodljivom. Ovo utire put web razvoju usmjerenom na korisnika gdje korisnik može uređivati ​​sadržaj na web stranici u stvarnom vremenu omogućavajući bolje korisničko iskustvo. U ovom se članku raspravljalo o tome kako postupati s događajima izmjene sadržaja u JavaScriptu i to je objašnjeno uz pomoć primjera.