Código Fonte - O melhor conteúdo para programadores

Este código tem nota

Autor

Raimundo Junior

membro deste outubro de 2008

Compartilhe e guarde

Enquete

Você gostou das mudanças no layout aqui do site?

Sim
Sem opinião
Não

Home Código Fonte JavaScript - DHTML Formulários

Script configurável para fomatação de CEP, CPF, Telefone e outros

Para você que precisa de um script configurável para formatar campos como CEP, CPF, CNPJ, Telefone, Data, Hora e etc.

O código é 100% configurável, você mesmo pode criar sua máscara. Excelente para validação dos dados digitados pelos usuários.

<html>
<head>
<title>Formatar Dados</title>
<style type="text/css">
.tabela {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 10px;
}
</style>
<script>
function formatar(mascara, documento){
  var i = documento.value.length;
  var saida = mascara.substring(0,1);
  var texto = mascara.substring(i)
  
  if (texto.substring(0,1) != saida){
            documento.value += texto.substring(0,1);
  }
  
}
</script>
</head>
<body>
<table width="301" height="160" border="0" cellspacing="0" class="tabela">
  <tr>
    <td height="34" colspan="2" valign="top">Este script formata qualquer tipo de campo.<br>
Veja o Exemplo abaixo</td>
  </tr>
  <tr>
    <td width="32" height="24">Data:</td>
    <td width="265"><input type="text" name="data" maxlength="10" OnKeyPress="formatar('##/##/####', this)" ></td>
  </tr>
  <tr>
    <td height="24">Tel.:</td>
    <td><input type="text" name="tel" maxlength="12" OnKeyPress="formatar('##-####-####', this)" ></td>
  </tr>
  <tr>
    <td height="24">Cep:</td>
    <td><input type="text" name="cep" maxlength="9" OnKeyPress="formatar('#####-###', this)" ></td>
  </tr>
  <tr>
    <td height="24">CPF:</td>
    <td><input type="text" name="cpf" maxlength="14" OnKeyPress="formatar('###.###.###-##', this)" ></td>
  </tr>
  <tr>
    <td height="24">Hora:</td>
    <td><input type="text" name="hora" maxlength="5" OnKeyPress="formatar('##:##', this)" ></td>
  </tr>
  <tr>
    <td colspan="2" valign="bottom">e assim por diante...<br />
&eacute; um codigo bem simples e de grande utilidade. </td>
  </tr>
</table>
</body>
</html>

<html>
<head>
<title>Formatar Dados</title>
<style type="text/css">
.tabela {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 10px;
}
</style>
<script>
function formatar(mascara, documento){
  var i = documento.value.length;
  var saida = mascara.substring(0,1);
  var texto = mascara.substring(i)
  
  if (texto.substring(0,1) != saida){
            documento.value += texto.substring(0,1);
  }
  
}
</script>
</head>
<body>
<table width="301" height="160" border="0" cellspacing="0" class="tabela">
  <tr>
    <td height="34" colspan="2" valign="top">Este script formata qualquer tipo de campo.<br>
Veja o Exemplo abaixo</td>
  </tr>
  <tr>
    <td width="32" height="24">Data:</td>
    <td width="265"><input type="text" name="data" maxlength="10" OnKeyPress="formatar('##/##/####', this)" ></td>
  </tr>
  <tr>
    <td height="24">Tel.:</td>
    <td><input type="text" name="tel" maxlength="12" OnKeyPress="formatar('##-####-####', this)" ></td>
  </tr>
  <tr>
    <td height="24">Cep:</td>
    <td><input type="text" name="cep" maxlength="9" OnKeyPress="formatar('#####-###', this)" ></td>
  </tr>
  <tr>
    <td height="24">CPF:</td>
    <td><input type="text" name="cpf" maxlength="14" OnKeyPress="formatar('###.###.###-##', this)" ></td>
  </tr>
  <tr>
    <td height="24">Hora:</td>
    <td><input type="text" name="hora" maxlength="5" OnKeyPress="formatar('##:##', this)" ></td>
  </tr>
  <tr>
    <td colspan="2" valign="bottom">e assim por diante...<br />
&eacute; um codigo bem simples e de grande utilidade. </td>
  </tr>
</table>
</body>
</html>

Este código foi útil para você?

Nota	Comentário
10	denunciar mariusss comentou em 17/9/2009 Incremento Muito bom o código....mas o ideal seria incrementar o código de modo que ele respeita-se o padrão de horas, datas e etc... por exemplo, se você colocar no campo data o dia 66, ele vai aceitar...mesmo que não exista...

Regras:
Os comentários seguem as seguintes regras:

Todos os comentários são enviados por membros cadastrados no site.
A pontuação de comentários de conteúdo do próprio membro não serão computados.
Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
Há um limite de 10 comentários por dia para cada membro.
Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

Autenticação:	Apelido: Senha: (ainda não tem cadastro? clique aqui!)

Título:	Máximo de 30 caracteres
Comentário:	Máximo de 255 caracteres
Avaliação:

Equipe | Tabela de Pontos e Estrelas | Política de Privacidade | Mapa do Site | Fale Conosco

Autor

Raimundo Junior

Tags

CNPJ

CPF

Formato

Formulário

JavaScript

Telefone

Compartilhe e guarde

Enquete

Você gostou das mudanças no layout aqui do site?

Script configurável para fomatação de CEP, CPF, Telefone e outros

Incremento

Comente