#drops contenteditable: O atributo para criar inputs de texto

Sabia que vocĂȘ consegue fazer qualquer elemento do HTML virar um input de texto? đŸ€Ż E sem usar a tag input!

O "contenteditable" Ă© um atributo que permite tornar qualquer elemento HTML editĂĄvel pelo usuĂĄrio. VocĂȘ pode usĂĄ-lo para criar editores de texto que vocĂȘ edita DIRETO na tag onde o elemento estĂĄ, sem precisar trocar ou criar um novo input ou outros recursos interativos que vocĂȘ imaginar.

Para usar o "contenteditable", vocĂȘ precisa definir o atributo como "true" no elemento que deseja tornar editĂĄvel, por exemplo:

<p contenteditable="true">Este parĂĄgrafo Ă© editĂĄvel.</p>

VocĂȘ tambĂ©m pode ouvir eventos de input no elemento editĂĄvel para obter informaçÔes sobre as açÔes do usuĂĄrio, como o objeto dataTransfer que contĂ©m os dados que foram colados ou soltos no elemento.

Por exemplo, vocĂȘ pode exibir os dados HTML que foram colados no elemento, assim:

<p contenteditable="true">Cole algum conteĂșdo HTML aqui.</p>
<p id="result"></p>
<script>
  const editable = document.querySelector('[contenteditable="true"]');
  const result = document.getElementById('result');

  editable.addEventListener('input', (e) => {
    result.textContent = e.dataTransfer.getData('text/html');
  });
</script>

Agora que vocĂȘ chegou atĂ© aqui, mostrarei o exemplo que mais gosto de mostrar para quem apresento essa propriedade que Ă©: um editor de CSS em tempo real para sua pĂĄgina!

🚹 Não use em produção (a menos que seu projeto precise disso haha)

Importante reforçar tambĂ©m que vocĂȘ precisarĂĄ utilizar aria-roles para deixar o elemento acessĂ­vel aos leitores de tela:

<div
  role="textbox"
  contenteditable="true"
  aria-placeholder="5-digit zipcode"
  aria-labelledby="txtboxLabel"></div>

Link da MDN: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role

Uma dica legal Ă© estudar sobre como utilizar essa propriedade no framework que vocĂȘ trabalha. Deixo aqui as referĂȘncias para vocĂȘ se aprofundar:

Curtiu? Me segue ai e acompanha para mais dicas de desenvolvimento em geral! 😍

Postagens por ai: