Publicado em 20 de março de 2025
Quando você quer permitir que o usuário insira informações em texto simples, seu primeiro instinto pode ser usar um <textarea>. Isso funciona para muitos casos e não requer esforço especial para funcionar com formulários, mas também tem limitações.
Um exemplo é aumentar o <textarea> dinamicamente com o conteúdo sem recorrer a hacks. Há o field-sizing: content, mas ele tem suporte limitado a navegadores. É aqui que entra a combinação de valores de atributo contenteditable="plaintext-only". Você pode adicionar esse recurso a elementos genéricos, como <div>, e fazer com que o elemento se redimensione automaticamente.
Outra limitação é o estilo. A API CSS Custom Highlight oferece um mecanismo para definir o estilo de intervalos de texto arbitrários em um documento usando JavaScript para criar os intervalos e CSS para definir o estilo deles. Um <textarea> usa internamente um <div> na raiz de sombra do agente do usuário. É por isso que o estilo do texto com a API CSS Custom Highlight não funciona. Se for usada em um elemento como um <div> diretamente que você tenha feito contenteditable, a API CSS Custom Highlight vai funcionar normalmente.
<style>
::highlight(highlight) {
background-color: yellow;
color: black;
}
</style>
<div contenteditable="plaintext-only">Edit me</div>
<script>
const parentNode = document.querySelector('div').firstChild;
const range = new Range();
range.setStart(parentNode, 0);
range.setEnd(parentNode, 3);
const highlight = new Highlight(range);
CSS.highlights.set('highlight', highlight);
</script>
Confira uma captura de tela da demonstração que mostra essa limitação. Observe que o texto no <textarea> não tem estilo, mas o texto nos dois elementos <div> genéricos contenteditable tem.
