contenteditable

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨julho de 2015⁩.

* Some parts of this feature may have varying levels of support.

Oatributo globalcontenteditable é um atributo enumerado indicando se o elemento deve ser editável pelo usuário. Se assim for, o navegador modifica seu widget para permitir a edição.

Experimente

<blockquote contenteditable="true">  <p>Edit this content to add your own quote</p></blockquote><cite contenteditable="true">-- Write your own name here</cite>

blockquote {  background: #eee;  border-radius: 5px;  margin: 16px 0;}blockquote p {  padding: 15px;}cite {  margin: 16px 32px;  font-weight: bold;}blockquote p::before {  content: "\201C";}blockquote p::after {  content: "\201D";}[contenteditable="true"] {  caret-color: red;}

O atributo deve ter um dos seguintes valores:

true ou umastring vazia, o que indica que o elemento é editável.
false, o que indica que o elemento não é editável.

Se o atributo for aplicado sem um valor, como<label contenteditable>Rótulo de Exemplo</label>, seu valor é tratado como umastring vazia.

Se esse atributo estiver faltando ou seu valor for inválido, seu valor é herdado de seu elemento pai: para que o elemento seja editável se seu pai for editável.

Observe que, embora seus valores permitidos incluamtrue efalse, este atributo é um enumerado e não umBooleano.

Você pode definir a cor usada para desenhar a inserção de textocaret com a propriedadecaret-color do CSS.