Saltar al contenido principal

TextArea

Abrir en ChatGPT
Sombra dwc-textarea 24.10
Java API

El componente TextArea proporciona un campo de entrada de texto de varias líneas donde los usuarios pueden escribir y editar bloques de texto más largos. Soporta límites máximos de caracteres, estructura de párrafos, ajuste de líneas y reglas de validación para controlar cómo se maneja la entrada.

Creando un TextArea​

Crea un TextArea pasando una etiqueta a su constructor. Propiedades como texto de marcador de posición, límites de caracteres y comportamiento de ajuste se pueden configurar a través de métodos de establecimiento.

Mostrar Código

Gestionando párrafos​

El componente TextArea proporciona características para manejar párrafos de texto, haciéndolo ideal para aplicaciones que requieren edición de documentos o entrada de texto estructurada.

Aquí hay un ejemplo rápido de cómo construir y manipular contenido de párrafo:

TextArea textArea = new TextArea();

// Insertar un párrafo al principio
textArea.addParagraph(0, "Este es el primer párrafo.");

// Añadir otro párrafo al final
textArea.addParagraph("Aquí hay un segundo párrafo.");

// Añadir contenido adicional al primer párrafo
textArea.appendToParagraph(0, " Esta oración continúa la primera.");

// Eliminar el segundo párrafo
textArea.removeParagraph(1);

// Recuperar e imprimir todos los párrafos actuales
List<String> paragraphs = textArea.getParagraphs();
for (int i = 0; i < paragraphs.size(); i++) {
  System.out.println("Párrafo " + i + ": " + paragraphs.get(i));
}

Validación​

El componente TextArea soporta dos tipos complementarios de validación: restricciones estructurales y restricciones de contenido.

Las restricciones estructurales se enfocan en cómo está organizado y visualmente dispuesto el texto. Por ejemplo:

  • setLineCountLimit(int maxLines) restringe el número de líneas permitidas en el área de texto.
  • setParagraphLengthLimit(int maxCharsPerLine) limita el número de caracteres por párrafo (o línea), ayudando a hacer cumplir estándares de legibilidad o formato.

Las restricciones de contenido, por otro lado, se ocupan de la cantidad total de texto ingresado, independientemente de cómo esté distribuido:

  • setMaxLength(int maxChars) limita el número total de caracteres permitidos en todos los párrafos.
  • setMinLength(int minChars) impone una longitud mínima, asegurando que se proporcione suficiente contenido.

La siguiente demostración permite a los usuarios ajustar los límites de validación, como conteo máximo de caracteres, longitud de párrafos y conteo de líneas, en tiempo real y ver cómo responde el TextArea.

Mostrar Código

Ajuste de palabras y ajuste de líneas​

Puedes controlar si el texto se ajusta o se desplaza horizontalmente usando setLineWrap(). Cuando el ajuste está deshabilitado, las líneas continúan horizontalmente más allá del área visible, requiriendo desplazamiento. Cuando está habilitado, el texto se ajusta automáticamente a la siguiente línea cuando alcanza el borde del componente.

Para refinar aún más cómo se comporta el ajuste, setWrapStyle() te permite elegir entre dos estilos:

  • WORD_BOUNDARIES ajusta el texto en palabras completas, preservando el flujo de lectura natural.
  • CHARACTER_BOUNDARIES ajusta en caracteres individuales, permitiendo un control más preciso sobre el diseño, especialmente en contenedores estrechos o de ancho fijo.

Estas opciones de ajuste funcionan de la mano con restricciones estructurales como los límites de conteo de líneas y longitud de párrafos. Mientras que el ajuste determina cómo fluye el texto dentro del espacio disponible, los límites estructurales definen cuánto espacio se permite ocupar al texto. Juntos, ayudan a mantener tanto la estructura visual como los límites de entrada del usuario.

Mostrar Código

Texto predictivo​

El componente TextArea soporta sugerencias de texto inteligente para ayudar a los usuarios a escribir más rápido y con menos errores. A medida que los usuarios ingresan texto, aparecen sugerencias predictivas basadas en la entrada actual, permitiéndoles completar frases comunes o esperadas.

Las predicciones se pueden aceptar presionando la tecla Tab o ArrowRight, insertando el texto sugerido en la entrada sin problemas. Si no hay una predicción adecuada disponible en un momento dado, la entrada permanece sin cambios, y el usuario puede continuar escribiendo sin interrupciones, asegurando que la función nunca interfiera.

Este comportamiento predictivo mejora tanto la velocidad como la precisión, especialmente en escenarios de entrada repetitiva o aplicaciones donde la consistencia de la frase es importante.

Mostrar Código

info

Esta demostración utiliza la API de Datamuse para proporcionar sugerencias de palabras basadas en la entrada del usuario. La calidad y relevancia de las predicciones dependen completamente del conjunto de datos y del mecanismo de puntuación de la API. No utiliza modelos de IA ni modelos de lenguaje grande (LLMs); las sugerencias se generan a partir de un motor ligero basado en reglas centrado en la similitud léxica.

Estado de solo lectura y deshabilitado​

El componente TextArea puede configurarse como solo lectura o deshabilitado para controlar la interacción del usuario.

Un área de texto solo lectura permite a los usuarios ver y seleccionar el contenido, pero no editarlo. Esto es útil para mostrar información dinámica o prellenada que debe permanecer sin cambios.

Un área de texto deshabilitada, por otro lado, bloquea toda interacción—incluyendo el enfoque y la selección de texto—y generalmente se estiliza como inactiva o atenuada.

Usa el modo solo lectura cuando el contenido es relevante pero inmutable, y el modo deshabilitado cuando la entrada no es actualmente aplicable o debería estar temporalmente inactiva.

Mostrar Código

Estilo​

Loading...