Descripción general de la entrada de máscara de Web Components
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.
<!DOCTYPE html><html><head><title>Mask Input Overview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-mask-inputid="mask-input"mask="00000"><igc-iconname="location"slot="prefix"></igc-icon><spanslot="helper-text">ZIP Code</span></igc-mask-input></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Uso
En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:
Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.
Reglas de máscara
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.
Aplicar mascarilla
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.
<!DOCTYPE html><html><head><title>Mask Input Applying Mask</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-mask-inputid="mask-input"mask="(####) 00-00-00 Ext. 9999"><igc-iconname="phone"slot="prefix"></igc-icon><spanslot="helper-text">Phone number</span></igc-mask-input></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Carácter rápido
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:
De forma predeterminada, el carácter prompt es un guión bajo.
Marcador de posición
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.
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:
<!DOCTYPE html><html><head><title>Mask Input Value Modes</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-mask-inputid="mask-input"><igc-iconname="file"slot="prefix"></igc-icon></igc-mask-input><divid="content"style="width: 100%; height: inherit;"><igc-radio-groupid="radio-group"alignment="horizontal"style="margin-bottom: 10px;"><igc-radioname="position"value="raw"label-position="after"checked>raw</igc-radio><igc-radioname="position"value="withFormatting"label-position="after">withFormatting</igc-radio></igc-radio-group><spanid="value-span">Value:</span></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css