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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Usage

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

    npm install igniteui-webcomponents
cmd

    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);
ts

    Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

    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 propiedad mask 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>
html

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Prompt Character

    Los desarrolladores pueden personalizar el símbolo de aviso utilizado para las partes vacías de la máscara. Para hacer esto, simplemente proporcione cualquier carácter a la propiedad prompt:

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

    De forma predeterminada, el carácter prompt es un guión bajo.

    Placeholder

    Los desarrolladores también pueden aprovechar la propiedad placeholder, que cumple 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>
html

    Value Modes

    ​IgcMaskInputComponent expone una propiedad valueMode que le permite elegir entre las opciones raw y withFormatting para configurar qué valor de entrada (formateado o sin formato) vincular en su formulario cuando se aplica una máscara específica. De forma predeterminada, valueMode está configurado en raw. Pruébelo usted mismo en el siguiente ejemplo:

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Ignite UI for Web Components | CTA Banner

    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);
}
css

    EXAMPLE
    Edit in:

    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