W tym artykule omówiono sposób obsługi zdarzeń zmiany contenteditable w JavaScript i wyjaśniono to na przykładzie.
Jak obsługiwać zdarzenia zmiany treści, które można edytować w JavaScript?
Contenteditable jest atrybutem wyliczeniowym. Użytkownik może dokonywać zmian w treści zgodnie ze swoimi wymaganiami. Jeśli jest to dozwolone, przeglądarka zmienia swój widget, aby umożliwić modyfikację elementów.
Jakie wartości są dopuszczalne w przypadku zdarzenia zmiany, które można edytować?
Contenteditable może przyjmować dowolną z tych wartości:
- „tylko tekst jawny” oznacza, że oryginalny tekst można edytować, chociaż formatowanie tekstu sformatowanego jest wyłączone.
- Pusty ciąg znaków lub prawda, co oznacza, że element można edytować.
- false, co oznacza, że elementu nie można edytować.
Przykład
Poniższy przykład wyjaśnia, w jaki sposób można wykorzystać zawartość edytowalną na stronie internetowej. Spójrzmy na poniższy kod, aby lepiej go zrozumieć:
HTML
Oto kod HTML wyjaśniający użycie zdarzeń zmiany contenteditable:
< zablokować cytat treściwyedytowalne = 'PRAWDA' >
< h3 > EDYTUJ SWOJĄ TREŚĆ TUTAJ! < / h3 >
< / zablokować cytat >
W powyższym kodzie HTML:
- Tworzony jest tag blockquote z atrybutem contenteditable ustawionym na true. Umożliwi to edycję zawartości znacznika blockquote.
- Znacznik h3 znajduje się wewnątrz znacznika cytatu blokowego. Mówi „EDYTUJ TREŚĆ TUTAJ!”, ponieważ jest obecny w
, co oznacza, że treść może być edytowana przez użytkownika.
CSS
Aby nasz kod był atrakcyjny wizualnie, użyliśmy następującego kodu CSS:
zablokować cytat {
tło : brzoskwiniowy ;
promień granicy : 10 pikseli ;
margines : 10 pikseli ;
}
cytat blokowy h3 {
wyściółka : 10 pikseli ;
}
W powyższym kodzie CSS:
- Tło znacznika cytatu blokowego ma kolor brzoskwiniowy z promieniem obramowania wynoszącym 10 pikseli i marginesem wynoszącym 10 pikseli.
- Nagłówek h3 wewnątrz cytatu blokowego ma dopełnienie o wielkości 10 pikseli.
Wyjście :
Poniższe dane wyjściowe wyjaśniają, w jaki sposób można edytować treść za pomocą zdarzenia zmiany contenteditable w JavaScript:
Znaczenie edycji treści
- Zwiększona interaktywność, ponieważ użytkownik może wygodnie modyfikować treść.
- Wygodne dostosowywanie jako programista za pomocą JavaScript może tworzyć zmodyfikowane zachowania, takie jak automatyczne zapisywanie, wyzwalające różne akcje w oparciu o dane wejściowe użytkownika.
- Pomaga usprawnić proces edycji, umożliwiając użytkownikowi dynamiczną edycję bez potrzeby tworzenia osobnego pola tekstowego.
Wniosek
Zdarzenia zmiany treści, które można edytować w JavaScript, umożliwiają użytkownikowi modyfikowanie treści, dzięki czemu strona internetowa jest responsywna i można ją dostosowywać. Toruje drogę do tworzenia stron internetowych zorientowanych na użytkownika, w których użytkownik może edytować zawartość strony internetowej w czasie rzeczywistym, zapewniając użytkownikowi większą responsywność. W tym artykule omówiono sposób obsługi zdarzeń zmiany contenteditable w JavaScript i wyjaśniono to na przykładzie.