Skip to end of metadata
Go to start of metadata

 

Utilização das máscaras de formatação para o componente de entrada de texto  

 1-lnserir o componente

 Inserção do componente "Entrada de texto" ou "Entrada de texto com botão" numa página HTML.

Figura 1- Escolha do componente


 

Figura 2- Componente inserido na página

     

         Pode-se observar ao lado direito da Figura 2 a propriedade "Mask" que irá receber a máscara a ser aplicada ao componente selecionado.

       

        2-Tipos de máscaras

O valor a ser inserido nos campos de entrada do formulário pode ser referente a três tipos básicos:

  • data e/ou hora
  • inteiro ou decimal (Numérico)
  • alfanumérico


        3-Estrutura de uma máscara

        As máscaras que podem ser aplicadas aos campos são divididas, em sua grande maioria, em duas seções:

Estrutura das Máscaras

<seção1>;<seção2>

  • <seção1>: A máscara propriamente dita. Esta máscara é composta por caracteres especiais, também conhecidos como caracteres de controle, utilizados para formatar os dados a serem inseridos num determinado campo.
  • <seção2>: Valor que define se a máscara aplicada aos dados do campo será armazenada no banco de dados. Para que os dados não sejam armazenados com a máscara, utiliza-se o valor zero(0) após o caractere ponto e vírgula(;); para que sejam armazenados com a máscara, utiliza-se o valor um(1).

Caracteres utilizados na elaboração de máscaras para valores numéricos

CaractereDescrição

0 ou 9

Aceita apenas números(Dígito)

#

Aceita apenas números (Dígito)

Ponto(.)

Utilizado como separador/agregador de dígitos

Vírgula(,)

Utilizado como separador para o(s) dígito(s) que representa(m) a parte decimal de um número

Ponto e vírgula(;)Separa as duas seções da máscara


Caracteres utilizados na elaboração de máscaras para datas e/ou horas

CaractereDescrição
DAceita valores numéricos inteiros referentes ao dia da data
MAceita valores numéricos inteiros referentes ao mês da data
YAceita valores numéricos inteiros referentes ao ano da data
HAceita valores numéricos inteiros referentes a hora
mAceita valores numéricos inteiros referentes ao minuto
sAceita valores numéricos inteiros referentes ao segundo
Barra(/)Utilizado como separador de dia, mês e ano ou valores numéricos em geral

Nota

Campos de entrada contendo máscaras para valores do tipo data e/ou hora devem ter, além da máscara preenchida, a propriedade "Tipo" definida de acordo com máscara. Esse "Tipo" permite a utilização do componente de calendário para seleção de uma data. Exemplo: Para a máscara: DD/MM/YYYY o tipo definido para o campo deve ser Data.

 

Caracteres utilizados na elaboração de máscaras para valores alfanuméricos

CaractereDescrição
ACaracteres alfanuméricos (A-Z, a-z, 0-9)
Qualquer outro caractereQualquer outro caractere inserido irá aparecer no campo de entrada de texto na mesma posição definida na máscara

 

          4-Exemplos de caracteres combinados para elaboração de máscaras a serem aplicadas em datas

EntradaExemploDescriçãoMáscara Exemplo - Resultado
D DD1...31Representa de forma numérica o dia do mês com um ou dois dígitos. Caso apenas um caractere D seja usado na máscara, os números entre 1...9 são representados apenas com um dígito. Caso seja utilizado dois caracteres DD, os números entre 1...9 são representados com dois dígitos. Ex.:04D/MM/YYYY - 1/12/2018
Do1º...31ºRepresenta de forma numérica e ordinal o dia do mêsDo/MM/YYYY - 14º/04/2018
DDD DDDD1...365Representa de forma numérica o dia do ano. Caso apenas três caracteres DDD sejam usados na máscara, os números serão representados com sua respectiva quantidade de dígitos. Caso sejam utilizados quatro caracteres DDDD, qualquer número definido terá pelo menos três dígitos. Ex.: Utilizando o padrão DDDD para a data 4/11/2018, a exibição será: 004/11/2018.DDD/MM/YYYY - 261/09/2018
M MM1...12Representa de forma numérica os meses do ano com um ou dois dígitos. Caso apenas um caractere M seja usado na máscara, os números entre 1...9 são representados apenas com um dígito. Caso seja utilizado dois caracteres MM, os números entre 1...9 são representados com dois dígitos. Ex.:04DD/MM/YY - 01/08/18
MMM MMMMJan...DezembroExibe o nome do mês abreviado com 3 letras(MMM) ou de forma completa(MMMM). Ex.: DD/MMMM/YYYY- 11/December/2017DD/MMM/YY - 21/Jun/2018

Mo

1º...12ºRepresenta de forma numérica e ordinal o mês referente a dataDD/Mo/YYYY - 14/4º/2018
YY18Ano com dois dígitosDD/MM/YY - 06/10/18
YYYY2018Ano com quatro dígitosD/MM/YYYY - 1/09/2018

Q

1...4Exibe o trimestre do ano referente a data escolhida DD/MM/YY Q - 13/07/18 3

 


         5
-Caracteres utilizados para elaboração de máscaras a serem aplicadas na representação de horário
EntradaExemploDescriçãoMáscara Exemplo - Resultado
H HH0...23Convenção de hora adotada onde o dia é dividido em 24 horas(24h) iniciando a partir da hora zero(0). Caso apenas um caractere H seja usado na máscara, os números entre 1...9 são representados apenas com um dígito. Caso seja utilizado dois caracteres HH, os números entre 1...9 são representados com dois dígitos. Ex.:04HH:mm:ss - 09:08:06
h hh1...12Convenção de hora adotada onde o dia é divido em dois períodos de 12 horas cada, ante meridiem(a.m) e post meridiem(p.m)(usado em conjunto da entrada a A). Caso apenas um caractere h seja usado na máscara, os números entre 1...9 são representados apenas com um dígito. Caso seja utilizado dois caracteres hh, os números entre 1...9 são representados com dois dígitos. Ex.:04hh:mm:ss a - 04:09:19 am
a Aam pmAnte meridiem(a.m) e post meridiem(p.m).hh:mm:ss a -  04:09:19 pm
m mm0...59Representação de minuto. Caso apenas um caractere m seja usado na máscara, os números entre 1...9 são representados apenas com um dígito. Caso seja utilizado dois caracteres mm, os números entre 1...9 são representados com dois dígitos. Ex.:04h:mm:ss- 8:31:19
s ss0...59Representação de segundo. Caso apenas um caractere s seja usado na máscara, os números entre 1...9 são representados apenas com um dígito. Caso seja utilizado dois caracteres ss, os números entre 1...9 são representados com dois dígitos. Ex.:04h:mm:ss- 8:31:19

 

          6-Uso básico das máscaras de formatação

          O editor HTML da plataforma CronApp permite a utilização de máscaras pré-estabelecidas. São elas:

TipoMáscaraDoc
Monetário#.##0,00;0O usuário poderá digitar uma sequência máxima de seis caracteres numéricos onde o primeiro caractere, que representa a casa de milhar do número, é separado do três seguintes, que representam a centena, pelo caractere de controle ponto(.). Por sua vez, esses três valores são separados dos dois últimos, que representam a porção decimal, por vírgula(,). Exemplo: 9.999,99
Monetário0,00;0O usuário poderá digitar uma sequência máxima de três caracteres numéricos onde o primeiro caracter, que representa a parte inteira do número, é separado dos outros dois, que representam a parte decimal, pelo caractere de controle vírgula(,). Exemplo: 1,23
Monetário0;0O usuário poderá digitar o máximo de um caractere numérico inteiro. Exemplo: 2
CPF999.999.999/99;0O usuário poderá digitar uma sequência máxima de onze caracteres numéricos onde os primeiros 9 caracteres são agrupados de três em três e separados, cada grupo, por ponto(.). Os últimos 2 caracteres são separados dos restantes por traço(/). Exemplo: 857.354.684/96
CNPJ99.999.999/9999-99;0O usuário poderá digitar uma sequência máxima de quatorze caracteres numéricos onde os dois primeiros caracteres são separados por ponto(.). Os seis caracteres consecutivos são agrupados de três em três e separados por ponto(.) entre si. Os quatro caracteres seguintes são separados dos anteriores por barra(/) e os dois finais por traço(-). Exemplo: 78.425.986/0036-15
CEP99999-999;0O usuário poderá digitar uma sequência máxima de oito caracteres numéricos onde os cinco primeiros caracteres são separados dos três últimos por traço(-).
Telefone com DDD(99) 9999-9999;0O usuário poderá digitar uma sequência máxima de dez caracteres numéricos onde os dois primeiros caracteres são separados dos demais por espaco( ) e contidos entre parênteses. Os oito caracteres restantes são agrupados de quatro em quatro e separados entre si por traço(-). Exemplo: (71) 3450-1440
DataDD/MM/YYYYO usuário poderá digitar uma sequência máxima de 8 caracteres numéricos para: DD(representa os dois dígitos do dia), MM(representa os dois dígitos do mês) e YYYY(representa os 4 dígitos do ano). Exemplo: 06/10/2017
Data e HoraDD/MM/YYYY HH:mm:ssO usuário poderá digitar uma sequência máxima de 8 caracteres numéricos para: DD(representa os dois dígitos do dia), MM(representa os dois dígitos do mês) e YYYY(representa os 4 dígitos do ano). Para a representação da hora com dois dígitos é usado os caracteres(HH) separados por dois pontos(:) da representação de minuto(mm) e segundo(ss). Exemplo: 01/10/2018 15:55:40

Obs.:

Caso o usuário decida por não utilizar máscaras e opte por definir apenas a propriedade "Tipo" do componente, as máscaras aplicadas terão como base o idioma padrão sendo utilizado no navegador.

 

 

Sobre máscaras em campos de formulários

As máscaras em campos de formulários funcionam como guias para ajudar os usuários durante a inserção de dados. Essas máscaras têm o objetivo de garantir que os dados inseridos nos campos estejam no formato correto. Normalmente, não há validação dos dados, apenas uma adequação em relação ao formato destes, garantindo que os tipos corretos de caracteres sejam inseridos nos lugares certos. Os usos típicos são para datas, horários, números de CPF, números de telefone, moedas, entre outros. Durante a inserção dos dados não formatados pelo usuário, a máscara cuida de adicionar traços e outros separadores em locais apropriados.

Por exemplo, nos Estados Unidos, a maioria das pessoas usa o formato MM/DD/YY para escrever datas. Um apliação que queira adequar a entrada de dados para esse padrão pode utilizar uma máscara de entrada apropriada, como ## / ## / ##, para entrada na data.

  • No labels