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í.
