Mask Componentes

Máscaras de digitação para CPF, CNPJ, telefone, CEP, data, hora, cartão e dinheiro.

O que é

Formata o valor conforme o usuário digita — sem precisar de biblioteca externa de máscara.

Como funciona

Guarda só os dígitos internamente (dataset.swMaskValue) e reformata a cada tecla. Padrões customizados usam um mini-formato por token (# dígito, A letra, * qualquer caractere).

Exemplos

Documentos — CPF, CNPJ e detecção automática Ao vivo

CPF

CNPJ

CPF ou CNPJ (document)

<input sw-mask="cpf" placeholder="000.000.000-00">
<input sw-mask="cnpj" placeholder="00.000.000/0000-00">
<input sw-mask="document" placeholder="detecta pelo tamanho">

Contato e endereço — telefone e CEP Ao vivo

Telefone

CEP

<input sw-mask="telefone" placeholder="(00) 00000-0000">
<input sw-mask="cep" placeholder="00000-000">

Data, hora, cartão e dinheiro Ao vivo

Data

Hora

Cartão

Dinheiro

<input sw-mask="data" placeholder="00/00/0000">
<input sw-mask="hora" placeholder="00:00">
<input sw-mask="cartao" placeholder="0000 0000 0000 0000">
<input sw-mask="dinheiro" placeholder="R$ 0,00">

Customizada, por token (# dígito, A letra, * qualquer) Ao vivo

Placa (AAA-#A##)

<input sw-mask="custom" sw-mask-mask="AAA-#A##" placeholder="ABC-1D23">

Atributos

sw-mask

nome do formato: cpf, cnpj, document (detecta CPF/CNPJ pelo tamanho), telefone, cep, data, hora, cartao, dinheiro, valor, ou "custom"

sw-mask-mask

com sw-mask="custom" — o padrão de tokens, ex.: "##.###.###-#"

Variantes

Nenhum.

Eventos

sw:mask-input

{ mask, raw, value } a cada tecla

API (JavaScript)

SW.Mask.raw(target)

retorna só os dígitos, sem formatação

SW.Mask.set(target, valor)

define o valor por código, já formatando

SW.Mask.addMask(nome, padrão)

registra um novo formato reutilizável

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nenhuma.

← AnteriorValid Próximo →Material Input