Ez a cikk a tartalommal szerkeszthető változási események kezelését tárgyalja JavaScriptben, és egy példa segítségével magyarázza el.
Hogyan kezeljük a tartalommal szerkeszthető változási eseményeket JavaScriptben?
A contenteditable egy felsorolt attribútum. A felhasználó az igényeinek megfelelően módosíthatja a tartalmat. Ha engedélyezve van, a böngésző módosítja a widgetjét, hogy lehetővé tegye az elemek módosítását.
Milyen értékek megengedettek egy tartalmas változási eseménynél?
A contenteditable a következő értékek bármelyikét veheti fel:
- A csak egyszerű szöveg azt jelenti, hogy az eredeti szöveg szerkeszthető, bár a formázott szöveg formázása le van tiltva.
- Üres karakterlánc vagy igaz, ami azt jelenti, hogy az elem szerkeszthető.
- hamis, ami arra utal, hogy az elem nem szerkeszthető.
Példa
A következő példa bemutatja, hogyan használható a szerkeszthető tartalom egy weboldalon. Nézzük meg az alábbi kódot, hogy jobban megértsük:
HTML
Íme egy HTML-kód, amely elmagyarázza a tartalommal szerkeszthető változási események használatát:
< blokk idézet tartalmas = 'igaz' >
< h3 > SZERKESZTÉSE ITT! < / h3 >
< / blokk idézet >
A fenti HTML kódban:
- Létrejön egy blockquote címke a contenteditable attribútum true értékre állítva. Ez lehetővé teszi a blockquote címkén belüli tartalom szerkesztését.
- A blockquote címkén belül egy h3 címke található. Ez azt írja, hogy „SZERKESZD MEG A TARTALMOT ITT!”, mivel a
-ban található, ami azt jelenti, hogy a tartalmat a felhasználó szerkesztheti.
CSS
Annak érdekében, hogy a kódunk vizuálisan vonzó legyen, a következő CSS-kódot használtuk:
blokk idézet {
háttér : barackpuff ;
határ-sugár : 10 képpont ;
árrés : 10 képpont ;
}
idézőjel h3 {
párnázás : 10 képpont ;
}
A fenti CSS-kódban:
- A blockquote címke háttere barackszínűre van beállítva, 10 képpont szegélysugárral és 10 képpont margóval.
- Az idézőjelben lévő h3 fejléc 10 képpontos kitöltésre van beállítva.
Kimenet :
A következő kimenet elmagyarázza, hogyan lehet a tartalmat szerkeszteni a JavaScriptben lévő contenteditable change esemény használatával:
A tartalom szerkesztésének fontossága
- Fokozott interaktivitás, mivel a felhasználó kényelmesen módosíthatja a tartalmat.
- Kényelmes testreszabás, mivel a programozó a JavaScript segítségével módosított viselkedéseket hozhat létre, mint például az automatikus mentés, amely a felhasználói bevitel alapján különböző műveleteket indít el.
- Segít leegyszerűsíteni a szerkesztési folyamatot, lehetővé téve a felhasználó számára a dinamikus szerkesztést anélkül, hogy külön szövegmezőre lenne szüksége.
Következtetés
A JavaScript tartalommal szerkeszthető változási eseményei lehetővé teszik a felhasználó számára, hogy módosítsa a tartalmat, így a weboldal érzékeny és testreszabható. Ez megnyitja az utat a felhasználó-központú webfejlesztés felé, ahol a felhasználó valós időben szerkesztheti a weboldal tartalmát, ami még jobban reagál a felhasználói élményre. Ez a cikk a tartalommal szerkeszthető változási események kezelését tárgyalja JavaScriptben, és egy példa segítségével magyarázza el.