Formatar campos

laurinha2004 · Setembro 23, 2009

Este código que estou usando para formatar campos só está funcionando no internet explorer, no mozilla firefox ele não funciona. Alguém sabe o porque e como corrigir?

formata_campos.js

function inserirMascara(formato, keypress, objeto){
    
    campo = eval (objeto);

    // cep
    if (formato=='cep'){
        separador = '-';
        conjunto1 = 5;
        if (campo.value.length == conjunto1){
            campo.value = campo.value + separador;
        }
    }

    // cpf
    if (formato=='cpf'){
        separador1 = '.'; 
        separador2 = '-'; 
        conjunto1 = 3;
        conjunto2 = 7;
        conjunto3 = 11;
        if (campo.value.length == conjunto1){
            campo.value = campo.value + separador1;
        }
        if (campo.value.length == conjunto2){
            campo.value = campo.value + separador1;
        }
        if (campo.value.length == conjunto3){
            campo.value = campo.value + separador2;
        }
    }

    // nascimento
    if (formato=='data_nascimento'){
        separador = '/'; 
        conjunto1 = 2;
        conjunto2 = 5;
        if (campo.value.length == conjunto1){
            campo.value = campo.value + separador;
        }
        if (campo.value.length == conjunto2){
            campo.value = campo.value + separador;
        }
    }

    // telefone
    if (formato=='telefone'){
        separador1 = '(';
        separador2 = ')';
        separador3 = '-';
        conjunto1 = 0;
        conjunto2 = 3;
        conjunto3 = 8;
        if (campo.value.length == conjunto1){
            campo.value = campo.value + separador1;
        }
        if (campo.value.length == conjunto2){
            campo.value = campo.value + separador2;
        }
        if (campo.value.length == conjunto3){
            campo.value = campo.value + separador3;
        }
    }
}

formulario.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Formulário</title>
</head>
<body>
<script src='js/formata_campos.js'></script>
<form method="post" name="cadastro" onSubmit="bt_incluir.disabled=true;">
Telefone: <input type="text" name="telefone" maxlength="13" size="13" onKeyPress="inserirMascara('telefone', window.event.keyCode, 'document.cadastro.telefone');"><br>
CPF: <input type="text" name="cpf" maxlength="14" size="16" onKeyPress="inserirMascara('cpf', window.event.keyCode, 'document.cadastro.cpf');"><br>
Data de nascimento: <input type="text" name="data_nascimento" maxlength="10" size="13" onKeyPress="inserirMascara('data_nascimento', window.event.keyCode, 'document.cadastro.data_nascimento');"><br>
<input type="submit" value="Incluir" name="bt_incluir">
</form>

_Cristiano_ · Setembro 23, 2009

Parece que o erro era simples, pelo menos nos meus testes aqui deu certo. Eu retirei da função do javascript a variavel "keypress" já que ela não está sendo usada para nada na função.

Coloquei a chamada do java script dentro das tags <head> e </head>.

As chamadas a função também foram modificadas já que em vez de 3 parametros, agora teremos apenas 2.

O código ficou como segue abaixo:

formata_campos.js

function inserirMascara(formato, objeto){
    
    campo = eval (objeto);
    
    // cep
    if (formato=='cep'){
        separador = '-';
        conjunto1 = 5;
        if (campo.value.length == conjunto1){
            campo.value = campo.value + separador;
        }
    }

    // cpf
    if (formato=='cpf'){
        separador1 = '.';
        separador2 = '-';
        conjunto1 = 3;
        conjunto2 = 7;
        conjunto3 = 11;
        if (campo.value.length == conjunto1){
            campo.value = campo.value + separador1;
        }
        if (campo.value.length == conjunto2){
            campo.value = campo.value + separador1;
        }
        if (campo.value.length == conjunto3){
            campo.value = campo.value + separador2;
        }
    }

    // nascimento
    if (formato=='data_nascimento'){
        separador = '/';
        conjunto1 = 2;
        conjunto2 = 5;
        if (campo.value.length == conjunto1){
            campo.value = campo.value + separador;
        }
        if (campo.value.length == conjunto2){
            campo.value = campo.value + separador;
        }
        return campo;
    }

    // telefone
    if (formato=='telefone'){
        separador1 = '(';
        separador2 = ')';
        separador3 = '-';
        conjunto1 = 0;
        conjunto2 = 3;
        conjunto3 = 8;
        if (campo.value.length == conjunto1){
            campo.value = campo.value + separador1;
        }
        if (campo.value.length == conjunto2){
            campo.value = campo.value + separador2;
        }
        if (campo.value.length == conjunto3){
            campo.value = campo.value + separador3;
        }
    }
}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
    <title>Formulário</title>
    <script language="javascript" src="formata_campos.js" type="text/javascript"></SCRIPT>
</head>


<body>
<form method="post" name="cadastro" onSubmit=" ">
Telefone:     <input type="text" name="telefone" maxlength="13" size="13" onKeyPress="inserirMascara('telefone', 'document.cadastro.telefone');"><br>

CPF:         <input type="text" name="cpf" maxlength="14" size="16" onKeyPress="inserirMascara('cpf','document.cadastro.cpf');"><br>

Data de nascimento: <input type="text" name="data_nascimento" maxlength="10" size="13" onKeyPress="inserirMascara('data_nascimento', 'document.cadastro.data_nascimento');"><br>
<input type="submit" value="Incluir" name="bt_incluir">
</form>

</body>

</html>

Também encontrei uma outra solução usando expressões regulares.máscara em campos de formulário. Funciona em Firefox e IE.

Lembrando que testei no I.E. 7.0.5730 e no Firefox 3.5.3.

Erros ou mais dúvidas, poste ai.

:D

Abraços.

Entrar

Formatar campos

Pergunta

laurinha2004

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

_Cristiano_

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades