top of page
  • Bad Drow

Máscaras de entrada para campos input em wix code

Atualizado: 11 de dez. de 2020


Quem é que nunca...


Todo programador, seja em Java, Php, VB, ASP ou C# (me perdoem os fãs de cobol, mas não falarei dele, nem de pascal e nem de lua...) já precisou alguma vez  inserir dados de um campo de input em um banco de dados, e notou fazendo isso a particularidade de certos campos em seu layout; sejam os telefones com seus parênteses e traços, sejam os cpfs com pontos e traço; caso não haja controle na forma como o usuário interage com o banco de dados, a comparação, busca e atualização posterior destes dados pode ficar dificultada.


Entram as máscaras!


Para que o caos não se estabelece, podemos (nós programadores) guiar o formato destes campos utilizando o que chamamos de máscaras de input, onde neste post chamarei a atenção para dois tipos, as máscaras ativas e as máscaras reativas.


Máscaras ativas Chamareis de máscaras ativas, aquelas cuja a funcionalidade é aplicada no evento de onKeypress e verifica a cada digito o formato inserido e o formata de acordo com sua prévia configuração. O exemplo abaixo ilustra uma máscara de campo ativa.


Máscaras reativas

São configurações prévias que ao serem comparadas com valores informam se o valor é ou não um formato válido, isto é, este tipo de máscara só será chamada ao fim da digitação do campo e o usuário terá que ser informado do formato correto do campo em algum momento. A figura abaixo, retirada do site: macoratti.net ilustra esta situação.


Exemplo da configuração de uma máscara


O exemplo abaixo ilustra um código funcional, onde o valor de 'campoInput' é atualizado todas as vezes que este bloco de código é executado. Bastaria tão somente fazer com que este bloco fosse executado a cada digito informado.


O que eu fiz para resolver o seu problema no wix code?


Percebi a necessidade deste tipo de implementação tão logo comecei a explorar a plataforma, após algumas análises e por fim a solução, creio ter chegado a um método funcional e fácil. Inicialmente criei uma função na pasta 'public' do wix e então exportei uma função chamada máscaras. Esta função tem como característica o recebimento de dois parâmetros, o primeiro é o nome da máscara que será usada (data, moeda, cep, cpf, cnpj, telefone) e o segundo é o seletor do campo input. Feito isso, teoricamente a máscara já esta aplicada... Veja um exemplo abaixo, perceba a implementação completa, incluindo o método clearTimeout e setTimeout, usados para alinhar o termo digitado em tempo real, senão ocorrerá o delay de um dígito.


O que achou?


E caso tenha interesse no template wix exposto no vídeo, uma cópia pode ser enviada para sua conta wix. Entre em contato e se informe.


 

Obrigado por ter lido!!! ❤😘👍


551 visualizações1 comentário

Posts recentes

Ver tudo
bottom of page