DEV Community

Cover image for Campo de Texto Editável em HTML
Daniel Nogueira
Daniel Nogueira

Posted on • Edited on

1

Campo de Texto Editável em HTML

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 contenteditable na tag <span>

Autor

Daniel Nogueira
https://www.linkedin.com/in/udanielnogueira/

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay