Primeiros passos com a Máscara de Entrada

Usar máscara de entrada para um campo pode ser uma das coisas que você prefere não usar muito, mas essa função pode ser bem útil em diversas situações.

Como primeiros passos, vamos lidar com dois cenários distintos.

Cenário #1:

Para o primeiro cenário, vamos ver como fazer no campo Entrada de Texto Curta. Então vá em frente e adicione logo essa ferramenta ao seu formulário, se você não tiver feito antes. E para chegar à opção Máscara de Entrada, veja os prints abaixo. 

Para a versão 4 de Jotform

Se você estiver usando a versão 4 do Jotform, siga os prints abaixo. Selecione a Entrada de Texto Curta, clique no ícone da engrenagem e abra a aba de Opções.

Você encontrará na aba a opção Máscara de Entrada. Selecione SIM.

Como mencionado na própria aba, três símbolos são usados como máscara de acordo com o designado: 

@  =   Mascarar letras

#    =   Mascarar números

*    =   Mascarar letras e números

Para explicar isto de maneira simplificada, a Máscara de Entrada basicamente te dá muito mais controle sobre o que é inserido e quais os limites para os seus usuários, de acordo com o que você configura para os caracteres ocultos.

Isso pode soar um pouco confuso então vamos detalhar um pouco mais, olhando para os exemplos abaixo.

Exemplo A:

Neste exemplo, vamos dizer que por algum motivo você queira nomear cidades que começam com “St”, como em “St Augustine”, o que vai ficar assim: “@@ @@@@@@@@@”.

Back-end do seu formulário:

Front-end do seu formulário:

Você pode incluir também o St. na Máscara, se quiser:

Exemplo B:

Agora vamos dar uma olhada em outra possibilidade. Você pode querer mostrar uma sequência oculta de números. Eles ficarão assim: “# # # # #”.

Back-end do seu formulário:

Front-end do seu Formulário:

Exemplo C:

Um bom uso da Máscara de Números pode ser com datas personalizadas em campos como “##/##/####”.

Back-end do seu formulário:

Front-end do seu formulário:

Exemplo D:

Os dois acima funcionam bem, mas você pode querer alguma coisa a mais, como no caso em que você precisar do endereço do local de trabalho de alguém. Nesse caso em particular, você vai querer combinar tanto @ quanto # e em nosso exemplo o resultado ficaria assim: “#### @@@@@@@@@ @@”.

Back-end do seu formulário:

Front-end do seu formulário:

Exemplo E:

Não se esqueça de que você pode adicionar qualquer dos exemplos já citados, mas também controlar a máscara com o uso do * (asterisco), que vai ficar mais ou menos assim: “*** ** **** ** ***”

Back-end do seu formulário:

Front-end do seu formulário:

Exemplo F:

E se nenhum destes for bom o suficiente para a sua situação?

E se você precisa de códigos específicos porque trabalha para o Governo, ou para um escritório jurídico ou em uma empresa de peças automotivas?

Você também pode compartimentalizar seus caracteres para criar algo sistemático como  “#@-#**#-#@”.

Back-end do seu formulário:

Front-end do seu formulário:

Agora que você já pegou o básico das máscaras para caixa de texto, vamos ver uma abordagem diferente em um segundo cenário com o campo do Telefone

Cenário#2:

É claro que o uso de máscara pode ser útil mas e se você precisar fornecer números de serviço com prefixo como 1-800, ou tiver usuários com números estrangeiros ou algo assim?

Em casos assim, a máscara de entrada para os campos de telefone pode servir bem para dar controle à maneira como os números de telefone serão inseridos e usados.

Exemplo A:

Vamos começar de novo, mas dessa vez com o campo Telefone.

Você chegará à opção Máscara de Entrada pelo mesmo caminho que descrevemos anteriormente neste guia.

Você vai notar que desta vez você só pode usar Máscara de Número com # e vai ver a entrada padrão de telefone pré-preenchida desta maneira: (###) ###-####”

Back-end do seu formulário:

Front-end do seu formulário:

Exemplo B:

É possível ajustar de acordo com os prefixos de seu interesse. Você pode fazer algo assim, dependendo do padrão desejado: 1-(8##)-###-#### 

Back-end do seu formulário:

Front-end do seu formulário:

Exemplo C:

Você pode adaptar de acordo com o padrão de cada país com o qual estiver trabalhando, inclusive para chamadas internacionais. Por exemplo, você pode configurar assim: +(##)######### 

Back-end do seu formulário:

Front-end do seu formulário:

Enfim, esperamos ter ajudado a esclarecer a respeito do uso de Máscara de Entrada.

Fique à vontade para explorar essa opção. Se você tiver sugestões ou dúvidas, fique à vontade para comentar abaixo ou em nosso forum de suporte.