contenteditable
Pozwala użytkownikowi edytować treść elementu bezpośrednio na stronie.
- Dotyczy
- Wszystkie elementy HTML
Przykład
#<p contenteditable="true" style="padding: 12px; border: 1px dashed #555; border-radius: 10px;">
Kliknij i zmień ten tekst. Możesz też dopisać coś od siebie.
</p>Definicja i zastosowanie
#Atrybut contenteditable zamienia zwykły element w pole edycji. Użytkownik może kliknąć w tekst, poprawić go, dopisać nowe akapity, a nawet wkleić sformatowaną treść.
Na tym mechanizmie opierają się edytory tekstu w przeglądarce, notatniki i narzędzia do komentowania. Sama zmiana treści nigdzie się nie zapisuje, o to musi zadbać JavaScript, na przykład nasłuchując zdarzenia input.
Wartość plaintext-only pozwala edytować tylko czysty tekst, bez formatowania. To nowsza wartość, która niedawno trafiła do wszystkich głównych przeglądarek.
Składnia
#<element contenteditable="true | false | plaintext-only">…</element>Wartości
#true
lub pusty
Treść można edytować, łącznie z formatowaniem.false
Treści nie można edytować, nawet jeśli rodzic jest edytowalny.plaintext-only
Można edytować tylko czysty tekst, formatowanie jest odrzucane.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Do zwykłych formularzy używaj
<input>i<textarea>.contenteditablejest trudniejszy w obsłudze i walidacji. - Treść wklejaną przez użytkownika zawsze oczyszczaj, zanim zapiszesz ją na serwerze.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.