Fecha de publicación: 20 de marzo de 2025
Cuando quieras permitir que el usuario ingrese información de texto sin formato, tu primer instinto podría ser usar un <textarea>. Esto funciona en muchos casos y no requiere ningún esfuerzo especial para que funcione con formularios, pero también tiene limitaciones.
Un ejemplo es aumentar <textarea> de forma dinámica con el contenido sin recurrir a trucos. Existe field-sizing: content, pero tiene compatibilidad limitada con los navegadores. Aquí es donde entra en juego la combinación de valores del atributo contenteditable="plaintext-only". Puedes agregarlo a elementos genéricos, como <div>, y hacer que el elemento se encargue automáticamente de cambiar el tamaño.
Otra limitación es el diseño. La API de Custom Highlight de CSS proporciona un mecanismo para aplicar diseño a rangos de texto arbitrarios en un documento con JavaScript para crear los rangos y CSS para aplicarles diseño. Un <textarea> usa internamente un <div> en la raíz de sombra del usuario-agente, por lo que no funciona aplicar diseño al texto con la API de Custom Highlight de CSS. Si se usa directamente en un elemento como un <div> que creaste como contenteditable, la API de CSS Custom Highlight funciona bien.
<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> 
Esta es una captura de pantalla de la demo que muestra esta limitación. Ten en cuenta que el texto en <textarea> no tiene diseño, pero el texto en los dos elementos <div> genéricos de contenteditable sí.
