Ostatnio edytowany:

contenteditable

Autor: Virtual Patriot

Przeznaczenie atrybutu contenteditable

Za pomocą atrybutu contenteditable możemy określić czy zawartość interesującego nas elementu HTML może ulec procesowi edycji przez użytkownika, czy też nie.

Atrybut "contenteditable" możemy dodać do dowolnego elementu HTML, lecz niektóre elementy HTML mogą nie reagować na wspomniany atrybut "contenteditable".

Wartość domyślna

BRAK lub dziedziczona od elementu rodzica (gdy pominęliśmy atrybut)

true (gdy nie podaliśmy wartości)

BRAK lub dziedziczona od elementu rodzica (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu contenteditable

true

Wartość true oznacza, że zawartość danego elementu HTML może ulec procesowi edycji przez użytkownika.

Przykładowy kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <p contenteditable="true">
      Zawartość tego przykładowego elementu HTML może zostać zedytowana przez użytkownika, <b>jak również zawartość tego przykładowego elementu HTML</b>.
    </p>

  </body>
</html>

Rezultat

Zawartość tego przykładowego elementu HTML może zostać zedytowana przez użytkownika, jak również zawartość tego przykładowego elementu HTML.

Zawartość przykładowego elementu "p" może ulec procesowi edycji przez użytkownika, ponieważ do wspomnianego elementu "p" został dodany atrybut "contenteditable" wraz z wartością "true".

false

Wartość false oznacza, że zawartość danego elementu HTML nie może ulec procesowi edycji przez użytkownika.

Przykładowy kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <p contenteditable="true">
      Zawartość tego przykładowego elementu HTML może zostać zedytowana przez użytkownika, <b contenteditable="false">lecz zawartość tego przykładowego elementu HTML nie może</b>.
    </p>

  </body>
</html>

Rezultat

Zawartość tego przykładowego elementu HTML może zostać zedytowana przez użytkownika, lecz zawartość tego przykładowego elementu HTML nie może.

Zawartość przykładowego elementu "b" nie może ulec procesowi edycji przez użytkownika, ponieważ do wspomnianego elementu "b" został dodany atrybut "contenteditable" wraz z wartością "false".

Interpretacja atrybutu contenteditable

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Zobacz więcej informacji o interpretacji atrybutu .