Web Components Mask Input Overview

    La entrada de máscara Ignite UI for Web Components es un campo de entrada que permite al desarrollador controlar la entrada del usuario y formatear el valor visible, en función de reglas configurables. Proporciona diferentes opciones de entrada y facilidad de uso y configuración.

    Web Components Mask Input Example

    Usage

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    Antes de utilizar IgcMaskInputComponent, debe registrarlo de la siguiente manera:

    import { defineComponents, IgcMaskInputComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcMaskInputComponent);

    Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

    Mask Rules

    La siguiente tabla muestra las reglas de máscara integradas admitidas:

    Personaje de máscara Descripción
    0 Carácter de dígito [0-9]. Se requiere entrada.
    9 Carácter de dígito [0-9]. La entrada es opcional.
    # Carácter de dígito [0-9], signo más (+) o menos (-). Se requiere entrada.
    l Carácter de letra. Se requiere entrada.
    ? Carácter de letra. La entrada es opcional.
    A Carácter alfanumérico (letra o dígito). Se requiere entrada.
    a Carácter alfanumérico (letra o dígito). La entrada es opcional.
    & Cualquier carácter del teclado. Se requiere entrada.
    C Cualquier carácter del teclado. La entrada es opcional.
    \ Escapa de una bandera de máscara y la convierte en literal.

    Estos indicadores también participan en la validación del componente, es decir, la entrada deja de ser válida si algunas, pero no todas, las posiciones requeridas están ocupadas (el valor de ninguna posición ocupada/vacía sigue siendo responsabilidad de required). Esto se aplica tanto a las entradas independientes como a las incluidas en un formulario.

    Applying Mask

    Aplicar la mascarilla es bastante sencillo. Todo lo que necesita hacer es proporcionar un patrón predeterminado a la mask propiedad de la entrada.

    En el siguiente ejemplo, aplicaremos una máscara para un número de teléfono con un código de extensión.

    <igc-mask-input id="mask-input" mask="(####) 00-00-00 Ext. 9999">
    <igc-icon name="phone" slot="prefix"></igc-icon>
    <span slot="helper-text">Phone number</span>
</igc-mask-input>

    Después de eso deberías ver lo siguiente en tu navegador:

    Prompt Character

    Los desarrolladores pueden personalizar el símbolo de solicitud utilizado para las partes no rellenadas de la máscara. Para ello, basta con proporcionar cualquier carácter a la prompt propiedad:

    <igc-mask-input id="mask-input" mask="(####) 00-00-00 Ext. 9999" prompt="-"></igc-mask-input>

    Por defecto, el prompt carácter es guion de guion.​

    Placeholder

    Los desarrolladores también pueden aprovechar la placeholder propiedad, que sirve para el propósito del atributo de marcador de posición de entrada nativo. Si no se proporciona ningún valor para el marcador de posición, el valor de la máscara se utiliza como tal.

    <igc-mask-input id="mask-input" mask="00/00/0000" placeholder="dd/MM/yyyy"></igc-mask-input>

    Value Modes

    Revela IgcMaskInputComponent una valueMode propiedad que te permite elegir entre raw opciones withFormatting y opciones para configurar qué valor de entrada (formateado o en bruto) vincular en tu formulario cuando se aplica una máscara específica. Por defecto, valueMode está configurado como raw. Pruébalo tú mismo en el ejemplo de abajo:

    Styling

    El IgcMaskInputComponent componente expone partes CSS para casi todos sus elementos internos. En la tabla siguiente se enumeran todas las partes CSS expuestas:

    Nombre Descripción
    container El contenedor principal que contiene todos los elementos de entrada principales.
    input El elemento de entrada nativo.
    label El elemento de etiqueta nativo.
    prefix El contenedor de prefijo.
    suffix El contenedor del sufijo.
    helper-text El contenedor de texto auxiliar. 
    igc-mask-input::part(input) {
  background-color: var(--ig-primary-100);
  border-color: var(--ig-secondary-500);
  box-shadow: none;
}

igc-mask-input::part(input)::placeholder {
  color: var(--ig-primary-100-contrast);
}

    Assumptions and limitations

    • La entrada enmascarada no expone un atributo de tipo ya que siempre es una entrada de tipo texto.
    • Actualmente no se admite el comportamiento de deshacer/rehacer.

    API References

    Additional Resources