Ir ao conteúdo
  • Cadastre-se
Gabriel Queiroz

RESOLVIDO Mascaras javascript não funcionam no firefox

Recommended Posts

Ola,

 

Estou com um problema, preciso colocar algumas mascaras com javascript em um site, quando eu abro o site no google chrome as mascaras funcionam perfeitamente, mas quando abro com o firefox ele da um problema, eu escrevo e ele coloca a mascara certo, mas não consigo apagar, ele chega em algum lugar da mascara e para de apagar.

 

Não conheço muito de javascript, esse codigo eu usei à um tempo e só testei ele no chrome na epoca.

 

Se alguem souber o que devo fazer, obrigado.

 

Segue codigo em JavaScript

function FormataCPF(evt){
    vr = (navigator.appName == 'Netscape') ?evt.target.value : evt.srcRlement.value;
    if(vr.length == 3) vr = vr+".";
    if(vr.length == 7) vr = vr+".";
    if(vr.length == 11) vr = vr+"-";
    return vr;
}

E aqui a parte do HTML

<input type="text" name="cpf" style="width: 80%;" maxlength="14" onKeyPress="this.value = FormataCPF(event)" required>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Gabriel Queiroz Pode ser que não funcione por estar testando só um navegador..

Recomendo usar um plugin jQuery para validações em geral.. como cpf, telefones e etc.. 

Mas se só quer aplicar uma máscara no campo cpf..  com jquery é bem fácil:

$(document).ready(function(){
	var campo = $("#cpf");
    campo.on("keypress",function(){
  	 var valor = $("#cpf").val();
     
     if(valor.length == 3){ campo.val(valor + ".");}
     if(valor.length == 7){ campo.val(valor + ".");}
     if(valor.length == 11){ campo.val(valor + "-");}
  });
});

Basicamente armazenamos  numa variável o campo, para isso acrescentei no input um id="cpf"

Depois chamamos a função on() que leva dois parâmetros:  a ação e a função.

No caso queremos executar algo enquanto digita, então a ação é keypress.

Dentro dessa função on(), armazenamos o valor digitado do campo em uma variável. Chamei de "valor"

Agora que temos o valor digitado em uma variável atribuímos uma palavra chave chamada length. que serve para descobrir o cumprimento do valor. Com isso, podemos fazer o teste!

 

Então,

  • SE o valor.length for igual a 3,   dizemos que campo.val() recebe o próprio valor concatenado com o "ponto".
  • SE o valor.length for igual a 7,   dizemos que campo.val() recebe o próprio valor concatenado com o "ponto".
  • SE o valor.length for igual a 11, dizemos que campo.val() recebe o próprio valor concatenado com o "hífen".

 

Veja funcionando: https://jsfiddle.net/xyok4vd4/

Mas lembre-se ele não testa se está colocando apenas números.. nesse caso deve colocar mais uns testes ali de teclas, por exemplo assim:  https://jsfiddle.net/xyok4vd4/1/

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@dif Eu coloquei no código pra testar mas estou com um outro problema, meu JQuery não funciona, eu tinha um outro arquivo JQuery já que estava tentando fazer funcionar, poderia me dar uma ajuda sobre o porque do JQuery não estar funcionando?

Chamada do JQuery e dos documentos:

<script src="mascaras.js" type="text/javascript"></script>
<script src="aceitacao.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Codigo JQuery (aceitacao.js):

$(document).ready(function(){

    var botões = $('#botões');
    var texto = $('#texto_nao_aceita_anuidade');
    botões.fadeOut(0,0000001);

    $("#autoriza_anuidade").click(function(){
        texto.hide(1);
        botões.show(1);
    });

    $("#nao_autoriza_anuidade").click(function(){
        texto.show(1);
        botões.hide(1);
    });

    $('#botao_limpar').click(function(){
        $('html,body').animate({scrollTop: 0},'slow');
    });

});

E o arquivo mascaras.js é aquele código que me passou

Compartilhar este post


Link para o post
Compartilhar em outros sites

@dif Consegui fazer funcionar o JQuery, o problema é que eu tava chamando ele por ultimo, coloquei ele por primeiro e pronto, usei o código que você passou que valida se é numero ou letra, isso esta funcionando corretamente, mas ainda sim, quando apago ele para em algum lugar e não apaga mais

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×