React Mask Input Overview

    La entrada de máscara Ignite UI for React 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.

    React Mask Input Example

    Usage

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Luego tendrás que importar elIgrMaskInput CSS necesario y registrar su módulo, así:

    import { IgrMaskInput } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    <IgrMaskInput mask="00000">
    <span slot="prefix">
        <IgrIcon ref={iconLocationRef} name="location" collection="material"></IgrIcon>
    </span>
    <span slot="helper-text">ZIP Code</span>
</IgrMaskInput>

    Para una introducción completa al Ignite UI for React, 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.

    Estas banderas también participan en la validación de componentes, es decir, la entrada se vuelve inválida si se llenan algunas, pero no todas, las posiciones requeridas (ningún valor lleno o vacío sigue siendo responsabilidad derequired ella). Esto se aplica tanto a entradas independientes como cuando se incluyen en un formulario.

    Applying Mask

    Aplicar la mascarilla es bastante sencillo. Solo tienes que proporcionar un patrón predeterminado para lamask 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.

    <IgrMaskInput mask="(####) 00-00-00 Ext. 9999">
    <span slot="prefix">
        <IgrIcon ref={iconPhoneRef} name="phone" collection="material"></IgrIcon>
    </span>
    <span slot="helper-text">Phone number</span>
</IgrMaskInput>

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

    Prompt Character

    Los desarrolladores pueden personalizar el símbolo de indicación usado para las partes sin rellenar de la máscara. Para ello, simplemente aporta cualquier carácter a laprompt propiedad:

    <IgrMaskInput mask="(####) 00-00-00 Ext. 9999" prompt="-"></IgrMaskInput>

    Por defecto, elprompt carácter es guion de guion.​

    Placeholder

    Los promotores también pueden aprovechar laplaceholder propiedad, que cumple la función del atributo temporal de entrada nativa. Si no se proporciona valor para el marcador de posición, el valor de la máscara se utiliza como tal.

    <IgrMaskInput mask="00/00/0000" placeholder="dd/MM/yyyy"></IgrMaskInput>

    Value Modes

    RevelaIgrMaskInput unavalueMode propiedad que te permite elegir entreraw opcioneswithFormatting 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 comoraw. Pruébalo tú mismo en el ejemplo de abajo:

    Styling

    ElIgrMaskInput componente expone las piezas CSS de casi todos sus elementos internos. La siguiente tabla enumera 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