La combinación de valores de atributos "texto sin formato" y "editable por el usuario" ahora está disponible como modelo de referencia

Thomas Steiner

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>

Panel de elementos de las Herramientas para desarrolladores de Chrome que inspecciona un textarea que muestra que usa un div en un raíz en sombra de usuario-agente.

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

Demostración que muestra cómo la API de CSS Custom Highlight solo funciona con los elementos div de contenteditable, pero no con textarea.