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.
O atributo global contenteditable é 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:
trueou uma string 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 uma string 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 incluam true e false, este atributo é um enumerado e não um Booleano.
Você pode definir a cor usada para desenhar a inserção de texto caret com a propriedade caret-color do CSS.
Especificações
| Specification |
|---|
| HTML # attr-contenteditable |
Compatibilidade com navegadores
Loading…
Veja também
- Tornando o conteúdo editável
- Todos os atributos globais
HTMLElement.contentEditableeHTMLElement.isContentEditable- A propriedade
caret-colordo CSS. - Evento de
input-HTMLElement