Nesse artigo, vamos criar um campo de texto que pode ser editado pelo usuário no navegador. Além disso, iremos perceber um detalhe que pode ser resolvido usando uma outra tag em específico.
E para tornar um campo de texto editável, usamos uma solução muito simples que é adicionar o atributo contenteditable, esse atributo pode assumir dois valores: true ou false.
<p contenteditable="true">Conteúdo editável</p>
No exemplo abaixo, usaremos o atributo contenteditable em uma tag parágrafo. E logicamente, para atender ao que queremos, atribuímos ao atributo o valor true.
Perceba que, o elemento de parágrafo está ocupando toda a largura disponível. Existe uma maneira de contornar essa situação, que é usando a tag <span> ao invés da tag <p>.
<span contenteditable="true">Conteúdo editável</span>
Agora a largura do campo de texto editável não é mais uma largura fixa, mas está dependendo do tamanho do conteúdo em si.
Esse artigo abordou
- Atributo
contenteditable - Atributo
contenteditablena tag<span>
Autor
Daniel Nogueira
https://www.linkedin.com/in/udanielnogueira/
Top comments (0)