Tento článok pojednáva o tom, ako spracovať obsahovo upraviteľné zmeny v JavaScripte, a vysvetľuje to pomocou príkladu.
Ako spracovať udalosti upraviteľných zmien v JavaScripte?
Contenteditable je vymenovaný atribút. Používateľ môže vykonávať zmeny v obsahu podľa svojich požiadaviek. Ak je to povolené, prehliadač zmení svoj widget tak, aby umožňoval úpravu prvkov.
Aké hodnoty sú prípustné v rámci udalosti zmeny, ktorá sa dá upraviť?
Upraviteľný obsah môže mať jednu z týchto hodnôt:
- plain text-only znamená, že pôvodný text je možné upravovať, aj keď je formátovanie RTF vypnuté.
- Prázdny reťazec alebo true, čo znamená, že prvok možno upraviť.
- false, čo znamená, že prvok nemožno upraviť.
Príklad
Nasledujúci príklad vysvetľuje, ako možno použiť upraviteľný obsah na webovej stránke. Pozrime sa na nižšie uvedený kód, aby sme mu lepšie porozumeli:
HTML
Tu je kód HTML, ktorý vysvetľuje použitie udalostí zmien s možnosťou úpravy:
< blockquote spokojné = 'pravda' >
< h3 > UPRAVTE SVOJ OBSAH TU! < / h3 >
< / blockquote >
Vo vyššie uvedenom HTML kóde:
- Vytvorí sa značka blockquote s atribútom contenteditable nastaveným na hodnotu true. To umožní upravovať obsah v značke blockquote.
- Značka h3 sa nachádza vo vnútri značky blockquote. Je tam napísané „TU UPRAVTE SVOJ OBSAH!“, pretože sa nachádza vo vnútri
, čo znamená, že obsah môže upravovať používateľ.
CSS
Aby bol náš kód vizuálne príťažlivý, použili sme nasledujúci kód CSS:
blockquote {
pozadie : broskyňový ;
hraničný polomer : 10 pixelov ;
marža : 10 pixelov ;
}
bloková citácia h3 {
vypchávka : 10 pixelov ;
}
Vo vyššie uvedenom kóde CSS:
- Pozadie značky blockquote je nastavené tak, aby malo broskyňovú farbu s polomerom okraja 10px a okrajom 10px.
- Nadpis h3 vo vnútri blokovej ponuky je nastavený tak, aby mal výplň 10 pixelov.
Výkon :
Nasledujúci výstup vysvetľuje, ako je možné upravovať obsah pomocou udalosti contenteditable change v JavaScripte:
Dôležitosť úpravy obsahu
- Zvýšená interaktivita, pretože používateľ môže obsah pohodlne upravovať.
- Pohodlné prispôsobenie ako programátora pomocou JavaScriptu môže vytvoriť upravené správanie, ako je automatické ukladanie, spúšťanie rôznych akcií na základe vstupu používateľa.
- Pomáha zefektívniť proces úprav a umožňuje používateľovi upravovať dynamicky bez potreby samostatného textového poľa.
Záver
Udalosti zmien s možnosťou úpravy obsahu v JavaScripte umožňujú používateľovi upravovať obsah tak, aby bola webová stránka responzívna a prispôsobiteľná. To pripravuje cestu k vývoju webu zameranému na používateľa, kde môže používateľ upravovať obsah webovej stránky v reálnom čase, čo umožňuje citlivejšiu používateľskú skúsenosť. Tento článok diskutoval o tom, ako zaobchádzať s udalosťami upraviteľných zmien v JavaScripte, a vysvetlil to pomocou príkladu.