AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Ayuda / Desarrollar una aplicación o un sitio web / Controles, ventanas y páginas / Controles: tipos disponibles / Control Campo de entrada
  • Presentación del control Campo de entrada
  • Crear un control "Campo de entrada"
  • Principales características de la pestaña "General"
  • Tipo de control Campo de entrada
  • Tipo y máscaras
  • Funcionalidades específicas de HTML 5
  • Principales características de la pestaña "UI"
  • Estado inicial
  • Parámetros
  • Validar controles Campo de entrada con la tecla Entrar
  • Botones integrados en el área de entrada
  • Principales características de la pestaña "Detalles"
  • Personalizar el teclado alfanumérico
  • Principales características de la pestaña "Ayuda"
  • Mostrar un texto de ayuda en un control Campo de entrada
  • Principales características de la pestaña "Estilo"
  • Estilo del control Campo de entrada
  • Convertir un control Campo de entrada en un control Estático
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReportes y ConsultasCódigo de Usuario (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Código Navegador
WINDEV Mobile
AndroidWidget Android iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Otros
Procedimientos almacenados
Presentación del control Campo de entrada
El control Campo de entrada permite a los usuarios introducir datos. Este control también puede utilizarse para ver información.

Crear un control "Campo de entrada"

Para crear un control "Campo de entrada":
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en .
  2. Haga clic en la ventana o página en la ubicación en la que desea crear el control. El control aparece en el editor.
Observación: También puede expandir "Entrada" y elegir un control Campo de entrada en una lista de controles predeterminados. La lista de controles disponibles se muestra con la plantilla del proyecto. Simplemente haga clic en el control que desea crear.
Para ver las características del control, seleccione la opción "Descripción" en el menú contextual.
Editor de reportes: También es posible crear controles Campo de entrada en un reporte. Para obtener más información, consulte Entrada en los reportes.
Principales características de la pestaña "General"

Tipo de control Campo de entrada

El formato de un control Campo de entrada depende del tipo de información que se muestra o se introduce. Se pueden crear los siguientes tipos de controles Campo de entrada:
  • Texto para mostrar o introducir cadenas de caracteres (nombre, dirección, etc.).
  • Texto multilínea para mostrar o introducir varias líneas separadas por un "Retorno de carro".
  • WINDEV Texto RTF para introducir y mostrar información en RTF.
  • WEBDEV - Código Servidor Texto HTML para introducir y dar formato a texto enriquecido.
  • WINDEViPhone/iPad Markdown de solo lecturapara mostrar texto Markdown.
  • Contraseña: al escribir, todos los caracteres se mostrarán como asteriscos.
  • Numérico para mostrar o introducir un valor numérico (peso, etc.). Si el control no es lo suficientemente grande para mostrar todo el número, se muestran los caracteres "+++".
  • Monetario para mostrar o introducir valores monetarios.
  • Monetario + Euro para mostrar o introducir precios, por ejemplo
  • Fecha para mostrar o introducir fechas.
  • Hora para introducir o mostrar horas.
  • Duración para introducir o mostrar duraciones.
  • Tokens de texto para soportar la entrada de datos con tokens.
  • WEBDEV - Código Servidor Subir para gestionar la carga de archivos.
WINDEV Para los controles Campo de entrada de tipo Texto, puede seleccionar la opción Autocompletar rutas de archivo. Esta opción muestra los diferentes directorios y archivos accesibles a medida que el usuario escribe un nombre de archivo con su ruta. Esta opción no está disponible si el control ya utiliza la entrada predictiva estándar.

Tipo y máscaras

  • Máscara de entrada: Se pueden utilizar varias máscaras de entrada para cada tipo de control Campo de entrada.
    Las máscaras de entrada son multilingües: se pueden seleccionar diferentes máscaras de entrada de acuerdo con el idioma de ejecución del proyecto. Para obtener más información, consulte Múltiples idiomas en los controles.
    Las máscaras de entrada pueden modificarse mediante programación con la propiedad InputMask.
    iPhone/iPad El teclado que se muestra al introducir datos en el control se adapta automáticamente a la máscara de entrada seleccionada. Por ejemplo, el teclado numérico aparecerá automáticamente para introducir valores en un control que utiliza una máscara de entrada numérica.
  • WINDEVAndroidJava Máscara de visualización: También puede definir máscaras de visualización para ciertos tipos de controles (Monetario, Monetario + Euro, Fecha, Hora y Duración). Estas máscaras de visualización se utilizan para definir las características del control cuando no está en modo de edición.
    Por ejemplo, un control de tipo Fecha puede tener:
    • la máscara de entrada: "DD/MM/AAAA".
    • la máscara de visualización: "DDDD DD MMMM AAAA" (formato de fecha completo).
      Las máscaras de visualización pueden ser multilingües y se pueden modificar mediante programación con la propiedad DisplayMask.
WEBDEV - Código Servidor

Funcionalidades específicas de HTML 5

Algunas características de los controles Campo de entrada utilizan funcionalidades de HTML 5:
  • Máscaras de entrada. Al elegir una máscara de entrada HTML 5, el sitio permite que el navegador controle y compruebe la entrada. La página (el sitio) no realiza las comprobaciones, sino el navegador. En cualquier caso, se puede ejecutar código WLanguage al salir de un control, lo que permite realizar comprobaciones adicionales de los datos introducidos. Estas características están disponibles solo para algunos navegadores, a partir de las siguientes versiones: Firefox 5, Chrome 12, Opera 11, Safari 5, etc.
    Para más detalles, consulte la ayuda sobre las máscaras de entrada de los controles de tipo texto, numérico, fecha y hora.
  • Control de búsqueda HTML 5: Si se selecciona esta opción para un control de texto, el navegador mostrará una "X" a la derecha del control. Esta X permite al usuario borrar el contenido del control.
    Esta opción está disponible en la pestaña "General" de la ventana de descripción del control.
    Atención: Esta opción solo está soportada en los navegadores compatibles con HTML 5, en particular Chrome 12 y Safari 5.
  • Autocompletado: Esta opción (en la pestaña "Detalles" de la ventana de descripción del control) permite habilitar o deshabilitar el autocompletado en controles Campo de entrada. El autocompletado está activado de forma predeterminada. Cuando el usuario comienza a escribir información en un formulario, todos los controles de la página se rellenan de forma inmediata y automática con los datos introducidos previamente en el equipo.
    El autocompletado es una funcionalidad que debe ser utilizada con cuidado. Debe desactivarse cuando se traten datos confidenciales.
    La mayoría de navegadores compatibles con HTML 5 (Firefox, Chrome, Safari, Opera, etc.) también admiten esta funcionalidad.
Principales características de la pestaña "UI"

Estado inicial

El estado inicial de un control Campo de entrada es el estado predeterminado del control cuando se abre la ventana o página. Los estados disponibles son los siguientes:

Parámetros

  • WINDEVWINDEV Mobile Admitir Markdown: Esta opción activa o desactiva el renderizado Markdown. Para obtener más información, consulte Markdown.
  • Acción de la tecla TAB: Esta opción permite o impide acceder al control usando la tecla Tab. De forma predeterminada, la opción "Acceder al control con TAB" se selecciona al crear un control. Todos los controles a los que se puede acceder con la tecla Tab se incluyen automáticamente en el orden de tabulación de la ventana. De forma predeterminada, el orden de tabulación es el orden en el que se crean los controles en la ventana. Para obtener más información, consulte Orden de tabulación en una ventana, página, etc..
WEBDEV - Código Servidor Esta opción corresponde a la opción "Acceder al control con TAB".
WEBDEV - Código Servidor

Validar controles Campo de entrada con la tecla Entrar

Para cada control Campo de entrada en una página, puede especificar la acción que se ejecutará cuando el usuario pulse la tecla Entrar.
Esto permite, por ejemplo, especificar los eventos predeterminados en una página. Por ejemplo, puede haber varios controles de búsqueda en la misma página, y cada control puede ser validado pulsando la tecla Entrar. La acción realizada será la acción asociada al control Campo de entrada que tenga el foco.
Para definir la acción asociada a un control Campo de entrada:
  1. Cree un botón que contenga el código deseado.
  2. Abra la descripción del control Campo de entrada. En la pestaña "UI", seleccione el botón deseado en la opción " Acción de 'Entrar' ".
Novedad versión 2024
WINDEVWINDEV Mobile

Botones integrados en el área de entrada

Un control Campo de entrada puede contener varios botones en el área de entrada:
  • Un botón a la izquierda.
  • Un botón a la derecha.
  • Un botón de eliminación.
Para obtener más información, consulte Botones del área de entrada.
Principales características de la pestaña "Detalles"
Un control Campo de entrada puede:
  • WINDEV utilizarse para arrastrar y soltar un elemento. Para obtener más información, consulte Arrastrar y soltar.
  • WINDEVWindows utilizar sugerencias de entrada: Cuando un usuario introduce datos en el control, la aplicación propone automáticamente el valor correspondiente del campo HFSQL clave relacionado al control.
    Por ejemplo, en el control "Ciudad", una vez que se escribe "Lo", se propone automáticamente "Londres".
    Esta funcionalidad solo se puede utilizar con campos clave y campos de tipo Texto.
    La entrada predictiva no puede utilizarse con campos que no sean clave, con elementos de tipo Numérico, o si se utiliza una máscara de entrada para las fechas. Para obtener más información, consulte Sugerencias de entrada en un control Campo de entrada
Un control Campo de entrada también puede incluir:
  • WINDEVWindows un corrector ortográfico que utiliza:
    • el diccionario OpenOffice instalado en el equipo, o un corrector ortográfico y gramatical que utilice el diccionario de microsoft Word.
    • un corrector ortográfico integrado (basado en los diccionarios Hunspell).
  • WINDEVWindows un historial de entradas: Cuando un usuario comienza a escribir en el control, la lista de valores introducidos previamente aparecerá automáticamente. Este historial de entradas no está disponible en controles multilínea. Para obtener más información, consulte Guardar la entrada de datos (FAA).
AndroidiPhone/iPad

Personalizar el teclado alfanumérico

En las aplicaciones Android y iOS, un teclado en pantalla aparece automáticamente cuando un control de entrada de texto obtiene el foco. Este teclado permite al usuario introducir el texto deseado.
El teclado incluye un botón (abajo a la derecha) que puede ser personalizado:
Para configurar este botón:
  1. Vaya a la pestaña "Detalles" de la ventana de descripción del control Campo de entrada.
  2. En la opción "Botón teclado", seleccione el tipo de botón deseado. Dependiendo del tipo seleccionado, el sistema mostrará el botón correspondiente en el idioma actual del dispositivo.

    Observación: Solo se puede agregar el botón "Personalizado" en Android.
  3. Valide.
El evento asociado a este botón se puede introducir en el editor de código. Se trata del evento opcional "Validación mediante el teclado". Para obtener más información, consulte Eventos del control Campo de entrada.
Principales características de la pestaña "Ayuda"
WINDEVWEBDEV - Código ServidoriPhone/iPad

Mostrar un texto de ayuda en un control Campo de entrada

El texto de ayuda se muestra en un control Campo de entrada vacío. Este texto de ayuda desaparece automáticamente cuando el usuario introduce el primer carácter en el control.
Ejemplo de texto de ayuda
El texto de ayuda está disponible para:
  • Controles Campo de entrada de tipo Texto.
  • WINDEViPhone/iPad Controles Campo de entrada de tipo Numérico, Monetario y Monetario + Euro.
    Para mostrar el texto de ayuda en los controles Campo de entrada de tipo Numérico, Monetario o Monetario + Euro, la opción "En blanco si es cero" debe estar seleccionada (en la pestaña "Detalles" de la descripción del control).
    También puede mostrar el límite inferior y superior del control Campo de entrada numérico:
    • en el texto de ayuda ("Mostrar límites en el texto de ayuda" en la pestaña "Detalles" de la descripción del control).
    • en el tooltip del control ("Mostrar límites en el tooltip" en la pestaña "Detalles" de la descripción del control).
El texto de ayuda se puede escribir:
  • en la ventana de descripción del control Campo de entrada (en la pestaña "Ayuda" de WINDEV y WINDEV Mobile, o en la pestaña "Contenido" de WEBDEV).
  • mediante programación con la propiedad Hint.
WINDEViPhone/iPad El estilo del texto de ayuda que se muestra en el control se puede configurar en la pestaña "Estilo". De forma predeterminada, se usa el mismo estilo del campo de entrada, en gris y cursiva. Para modificarlo, simplemente seleccione "Texto de ayuda" y seleccione "Personalizar estilo del texto de ayuda".
La propiedad HintTextColor permite obtener y establecer el color del texto de ayuda mediante programación.
WEBDEV - Código Servidor El texto de ayuda utiliza el mismo estilo que el campo de entrada, en cursiva y gris.
Principales características de la pestaña "Estilo"

Estilo del control Campo de entrada

La pestaña "Estilo" permite personalizar todos los elementos del control Campo de entrada. Puede aplicar estilos a diferentes elementos:
  • El título del control: Puede definir la fuente, la posición, el color, etc.
  • Los bordes externos.
  • El texto del área de entrada.
  • El área de entrada: Por ejemplo, puede definir el color de fondo, el color de los bordes, ...
    Observación: El botón "Márgenes" permite establecer los márgenes entre el texto y los bordes del área de entrada.
  • El texto de ayuda.
  • Los tokens (si hay).
  • Indicadores de entrada no válida u obligatoria.
  • ...
Convertir un control Campo de entrada en un control Estático
WINDEVUniversal Windows 10 AppAndroidiPhone/iPadJava WINDEV y WINDEV Mobile permiten convertir automáticamente un control Campo de entrada en varios controles Estático:
  1. Seleccione el control Campo de entrada que desea convertir.
  2. En la pestaña "Modificación", en el grupo "Transformaciones", despliegue "Refactorización y permutaciones" y seleccione "Control Campo de entrada a Estáticos".
Un control Estático se crea automáticamente para el título del control Campo de entrada y también para el área de entrada.
Versión mínima requerida
  • Versión 9
Esta página también está disponible para…
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 08/03/2024

Señalar un error o enviar una sugerencia | Ayuda local