Forum Academy Marketplace Showcase Pricing Features

Input Mask de CPF, CNPJ, Telefone

Bom dia pessoal do Brasil!

Vim trazer uma dica importante para quem precisa formatar o input com os pontos de CPF ou CNPJ, espaço e parenteses para números de telefone ou celular (espaço entre o número e o 9) ou o que vocês precisarem realizar! Resolvi fazer um fórum pois quando precisei da ferramenta demorei alguns dias procurando como solucionar o problema.

Estou criando um sistema de gestão para minha empresa e, na hora de cadastrar clientes, estava fazendo falta um input formatado adequadamente para os CPF, CNPJ ou telefones como mencionei anteriormente, após passar por um enorme processo de tentativa e erro, consegui resolver!

Por algum motivo, ao tentar usar os formatadores já prontos em plugin, nenhum funcionava para CPF ou CNPJ. Usei o InputFormatter do Toolbox Plugin ( https://bubble.io/plugin/ultimate-toolkit-1562812673262x109396480465567740 ) e através do cleave.js (site que mostra as expressões em JSON necessárias para formatar da forma que se precisa) peguei o código que era pra funcionar como um formatador de CPF (mas não funciona) e achei um site que “arruma” este código para poder funcionar no formatador. O site é o Json Formatter Validator ( https://jsonformatter.curiousconcept.com/# ). Pelo que entendi, por algum motivo, os códigos colocados no cleave.js não estavam adequadamente espaçados (Sou 100% leigo em programação, portanto não consegui entender o motivo) e, após validados no site acima, funcionaram perfeitamente.

Modifiquei o código customizado do cleave.js até que ficasse exatamente como eu gostaria que ficasse o CPF, CNPJ e os telefones (espaço entre os DDD e o 9 com espaço entre o DDD e o telefone).

Primeiro de tudo, se ainda não acionou, acione a possibilidade de implementar um ID aos elementos do bubble para os plugins poderem funcionar adequadamente. O caminho é em Settings -> General -> Marcar a caixa de “Expose the option to add ID tribute to HTML elements”:

Após, instale o plugin Ultimate Toolkit (link lá em cima no texto inicial)

Adicione o elemento “inputformatter”:

Coloque um ID no elemento que você quer formatar

Preencha o inputformatter com o ID e o código que você precisa:

Os códigos JSON que usei para formatar meus inputs (Copiar entre os colchetes):

CPF:
{
“delimiters”:[
“.”,
“.”,
“-”
],
“blocks”:[
3,
3,
3,
2
],
“uppercase”:true
}

CNPJ:

{
“delimiters”:[
“.”,
“.”,
“/”,
“-”
],
“blocks”:[
2,
3,
3,
4,
2
],
“uppercase”:true
}

Telefone (com espaçamento entre o DDD e o Número em si)

{
“delimiters”:[
“(”,
“)”,
“\u0020\u0020”,
“-”
],
“blocks”:[
0,
2,
0,
4,
4
],
“uppercase”:true
}

Celular (no formato DDD 9 9999.9999)
{
“delimiters”:[
“(”,
“)”,
“\u0020\u0020”,
“\u0020”,
“-”
],
“blocks”:[
0,
2,
0,
1,
4,
4
],
“uppercase”:true
}

É isto galera! Para quem precisar está ai!. Como ficam os inputs formatados:

image

image

Por algum motivo, o plugin formatador não está retornando os values como deveria, não sei se por alguma incompatibilidade com o código ou realmente com alguma situação de atualização do plugin em si, enviei uma mensagem para os criadores mas não obtive resposta. Se preciso, é possivel usar um plugin de validar CPF e CNPJ usando o valor direto do input. Eu uso o CPF/CNPJ VALIDATOR (Curiosamente a página do plugin parece estar indisponível). Funciona perfeitamente o validador, mesmo com os pontos adicionados do input. Espero que este fórum possa ajudar alguém que, como eu, não tem possibilidade de aprender linguagens no momento mas precisa resolver este problema que, apesar de simples, parece bem complicado quando nos deparamos com disfunções dos plugins. Se precisarem modificar para realizar outro tipo de formatação, apenas modifiquem o código ali (ele segue uma lógica que dá pra entender) e coloquem os blocks e os simbolos que precisarem (este simbolo \u0020 representa “espaço” em Json [outra coisa que demorei pra encontrar kk]). O Bubble é uma ferramenta fantástica para quem conseguir entender seu complexo porém acessível funcionamento! Tudo é possível, mesmo que pareça impossível!

Tenham perseverança no aprendizado de vocês! Boa sorte a todos!

5 Likes

Oi @LeonardoHF, seja bem vindo e obrigado pela contribuição :slight_smile:

Você chegou a testar com o plugin Input Formatter? Nós usamos ele e funciona direitinho, tanto pra CPF como CNPJ.

2 Likes

Olá @renatoasse! Obrigado! Acompanhei muito seus videos e se consegui sair do básico no bubble foi através deles!

Na verdade eu tentei três input formatters diferentes, contando o do próprio Toolbox. Quanto testei, nenhum deu certo. O input formatter especifico do toolbox foi o único que funcionou (O formatador padrão é em Data) e que possui a possibilidade de mudar o código JSON do plugin. Através do tutorial dos próprios criadores com os códigos do cleave.js para realizar a modificação, o Bubble apontava erro no código e no plugin. Tive a ideia de buscar um validador de JSON que organizasse adequadamente o código e o resultado é todo o processo ali de cima.

Ao meu ver, perto de todas as outras situações e funcionalidades em se criar algo no bubble, um input formatado em CPF não pode tomar tanto tempo, por isso resolvi postar aqui o método que obtive sucesso, além de ser uma via de alternativa para o pessoal que também estivesse com o mesmo problema com os plugins.

Até mais!

1 Like

@LeonardoHF sensacional! Só não sei se entendi muito bem a dinâmica do input formatter (Iniciante nível 0 aqui). Meu caso principal é com o telefone celular. Formato o input como Text (numbers only) e adiciono um ID. Daí adiciono um input formatter com o ID que criei para o input anterior + o código? é isso? Ou já adiciono direto o input formatter para ser o input onde o usuário adiciona o celular?

Pessoal, para conhecimento, testei aqui o Input Formatter e ele continua funcionando normalmente, de forma extremamente simples.

Segue:
image

image

3 Likes

@pedrohsthebit Tens que colocar o ID no input de entrada e escrever o ID na área indicada no plugin, após inseri-lo em sua página. Também é necessário colocar o input como Text para funcionar. Se o input estiver em integer, o resultado fica vazio, e se estiver em Text (number only), não permite os caracteres especiais da formatação. Isto, infelizmente, faz com que seja possível escrever letras dentro do Input. Estou dando uma olhada em como resolver isso, mas ainda não descobri nenhuma forma. Tecnicamente, o input formatter era para entregar o número de diversas formas, como por exemplo apenas os números digitados. Esta ação resolveria o problema, entretanto não sei o motivo dos plugins não estarem funcionando adequadamente na minha aplicação, não são os únicos que não estão funcionando como deveriam. Talvez seja melhor seguir a dica do @renatoasse e ir direto no plugin indicado abaixo de sua mensagem, pois pode funcionar para você e cortar todo este caminho que tive que realizar! Se encontrar uma solução para que o input aceite apenas números, atualizo o post! Até mais :slightly_smiling_face:

1 Like

Testei mas parou de funcionar.

Obrigado, Leonardo!
Até que na realidade é bem simples de entender né rs? Deu certo aqui. Pena que tem essa questão de aceitar letras também, mas por enquanto é aceitar.
Obrigado por compartilhar, grande abraço!

É, de fato sim! kk

Problema maior na verdade foi compreender ali o código e como coloca-lo.

A questão da letra é só questão de tempo!

Abraço, até mais!

Gostaria de saber como faz pra colocar a mascara de CPF e cnpj no mesmo Input, ou seja baseado em uma escolha do tipo de pessoa, se é física ou jurídica, e a partir dai o input formatava o numero digitado

Bom dia
é possível colocar mascara de cnpj e cpf no mesmo input?? e utilizar aqueles botões de escolha para diferenciar pessoa física da jurídica.
Tentando explicar melhor: eu coloco um input de radio buttons com as escolhas Pessoa fisica e Pessoa juridica, a partir da escolha que o usuario fizer o input formata ou com cpf ou com cnpj. isso é possivel??

@renatoasse @LeonardoHF
Bom dia
é possível colocar mascara de cnpj e cpf no mesmo input?? e utilizar aqueles botões de escolha para diferenciar pessoa física da jurídica.
Tentando explicar melhor: eu coloco um input de radio buttons com as escolhas Pessoa fisica e Pessoa juridica, a partir da escolha que o usuario fizer o input formata ou com cpf ou com cnpj. isso é possivel??

1 Like

Opa, desculpe @thalesjed, mas isso aí não vai funcionar bem não.

Primeira sugestão: não use o Input Formatter.
O plugin brasileiro Mask Input funciona bem melhor. Gratuito também, criado pelo Robson, um dos membros da Comunidade Sem Codar.

Segunda sugestão: use elementos separados para cada input. Essa condicional para mudar o ID Attribute tende a não funcionar bem, já tentei fazer isso dezenas de vezes.

3 Likes

Excelente esse Mask Input, salvou aqui, obrigado!!!