Autor publikacji
Virtual Patriot - Administrator

contenteditable

Data publikacji
Ostatnio edytowano

Przeznaczenie atrybutu contenteditable

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

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

Wartość domyślna

dziedziczona od elementu rodzica (gdy pominęliśmy atrybut), ponadto w przypadku gdy dany element HTML nie posiada elementu rodzica, wtedy brak wartości domyślnej

true (gdy nie podaliśmy wartości)

dziedziczona od elementu rodzica (gdy podaliśmy wartość nieprawidłową), ponadto w przypadku gdy dany element HTML nie posiada elementu rodzica, wtedy brak wartości domyślnej

Wartości atrybutu contenteditable

true

Wartość true oznacza, że zawartość danego elementu HTML może zostać zedytowana 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 "p" może zostać zedytowana przez użytkownika,
      <b>jak również zawartość tego przykładowego elementu "b"</b>.
    </p>

  </body>
</html>

Rezultat

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

Zawartość przykładowego elementu "p" może zostać zedytowana 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 zostać zedytowana 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 "p" może zostać zedytowana przez użytkownika,
      <b contenteditable="false">lecz zawartość tego przykładowego elementu "b" nie może</b>.
    </p>

  </body>
</html>

Rezultat

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

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

Przypuszczalnie domyślne reguły CSS związane z atrybutem contenteditable

*[contenteditable="true"]:focus {
  outline-width:1px;
  outline-style:dotted;
}

Interpretacja atrybutu contenteditable

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Zobacz więcej informacji o interpretacji atrybutu .