Tento článek pojednává o tom, jak zacházet s událostmi contenteditable change v JavaScriptu, a vysvětluje to na příkladu.
Jak zacházet s událostmi upravitelných změn v JavaScriptu?
Contenteditable je výčtový atribut. Uživatel může provádět změny v obsahu s ohledem na své požadavky. Pokud je to povoleno, prohlížeč změní svůj widget tak, aby umožňoval úpravu prvků.
Jaké hodnoty jsou přípustné pro obsahově upravitelné změny?
Položka contenteditable může nabývat jedné z těchto hodnot:
- plain text-only znamená, že původní text lze upravovat, i když je formátování RTF zakázáno.
- Prázdný řetězec nebo true, což znamená, že prvek lze upravit.
- false, což znamená, že prvek nelze upravit.
Příklad
Následující příklad vysvětluje, jak lze na webové stránce použít upravitelný obsah. Podívejme se na níže uvedený kód, abychom mu lépe porozuměli:
HTML
Zde je kód HTML, který vysvětluje použití událostí upravitelných změn:
< blockquote upravitelné = 'skutečný' >
< h3 > UPRAVTE SVŮJ OBSAH ZDE! < / h3 >
< / blockquote >
Ve výše uvedeném HTML kódu:
- Vytvoří se značka blockquote s atributem contenteditable nastaveným na true. To umožní upravovat obsah uvnitř značky blockquote.
- Značka h3 je přítomna uvnitř značky blockquote. Uvnitř
je napsáno „UPRAVTE SVŮJ OBSAH!“, což znamená, že obsah může uživatel upravovat.
CSS
Aby byl náš kód vizuálně přitažlivý, použili jsme následující kód CSS:
blockquote {
Pozadí : broskvoň ;
hraniční poloměr : 10px ;
okraj : 10px ;
}
bloková uvozovka h3 {
vycpávka : 10px ;
}
Ve výše uvedeném kódu CSS:
- Pozadí značky blockquote je nastaveno tak, aby mělo broskvovou barvu s poloměrem ohraničení 10px a okrajem 10px.
- Nadpis h3 uvnitř blockquote je nastaven tak, aby měl odsazení 10px.
Výstup :
Následující výstup vysvětluje, jak lze obsah upravit pomocí události contenteditable change v JavaScriptu:
Důležitost úpravy obsahu
- Zvýšená interaktivita, protože uživatel může obsah pohodlně upravovat.
- Pohodlné přizpůsobení jako programátor s pomocí JavaScriptu může vytvářet modifikované chování, jako je automatické ukládání, spouštějící různé akce na základě vstupu uživatele.
- Pomáhá zefektivnit proces úprav a umožňuje uživateli upravovat dynamicky bez potřeby samostatného textového pole.
Závěr
Události změn obsahu v JavaScriptu umožňují uživateli upravovat obsah, aby byla webová stránka responzivní a přizpůsobitelná. To dláždí cestu k vývoji webu zaměřenému na uživatele, kde uživatel může upravovat obsah na webové stránce v reálném čase, což umožňuje citlivější uživatelskou zkušenost. Tento článek pojednával o tom, jak zacházet s událostmi upravitelných změn v JavaScriptu, a vysvětlil to na příkladu.