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.

    These flags also participate in the component validation - i.e., the input becomes invalid if some but not all required positions are filled (no positions filled/empty value is still a responsibility of required). This applies to both stand-alone inputs and when included in a form.

    Applying Mask

    Applying the mask is pretty straightforward. All you need to do is provide a predetermined pattern to the mask property of the input.

    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

    Developers can customize the prompt symbol used for unfilled parts of the mask. To do this, simply provide any character to the prompt property:

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

    By default, the prompt character is underscore.

    Placeholder

    Developers can also take advantage of the placeholder property, which serves the purpose of the native input placeholder attribute. If no value is provided for the placeholder, the value of the mask is used as such.

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

    Value Modes

    The IgrMaskInput exposes a valueMode property that lets you choose between raw and withFormatting options to configure which input value (formatted or raw) to bind in your form when a specific mask is applied. By default, valueMode is set to raw. Try it for yourself in the example below:

    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