[Resolvido] Colocar hífen em CEP

erickhoepfner · Julho 2, 2008

Caros amigos,

Como exibo na paginação de resultados o CEP com o hífen "-"?

Apenas a saída!

No banco está gravado da seguinte forma:

12345678

Quero exibí-los assim:

12345-678

Atualmente estão sendo exibindos da seguinte maneira (sem hifen):

<?php echo $row_rs_detalhada['endereco_cep']; ?>

Muito grato

ahsc · Julho 2, 2008

Cara tenta usar uma máscara na entrada e depois você só exibe na tela. Segue um script que uso que funfa bem legal. É uma máscara para cep, cpf, cnpj, telefone ( em javascript ).

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
 
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>java script: máscara em campos de formulário simples e crossbrowser</title>
 
<script>
 
function mascara(o,f){
    v_obj=o
    v_fun=f
    setTimeout("execmascara()",1)
}
 
function execmascara(){
    v_obj.value=v_fun(v_obj.value)
}
 
function leech(v){
    v=v.replace(/o/gi,"0")
    v=v.replace(/i/gi,"1")
    v=v.replace(/z/gi,"2")
    v=v.replace(/e/gi,"3")
    v=v.replace(/a/gi,"4")
    v=v.replace(/s/gi,"5")
    v=v.replace(/t/gi,"7")
    return v
}
 
function soNumeros(v){
    return v.replace(/\D/g,"")
}
 
function telefone(v){
    v=v.replace(/\D/g,"")                 //Remove tudo o que não é dígito
    v=v.replace(/^(\d\d)(\d)/g,"($1) $2") //Coloca parênteses em volta dos dois primeiros dígitos
    v=v.replace(/(\d{4})(\d)/,"$1-$2")    //Coloca hífen entre o quarto e o quinto dígitos
    return v
}
 
function cpf(v){
    v=v.replace(/\D/g,"")                    //Remove tudo o que não é dígito
    v=v.replace(/(\d{3})(\d)/,"$1.$2")       //Coloca um ponto entre o terceiro e o quarto dígitos
    v=v.replace(/(\d{3})(\d)/,"$1.$2")       //Coloca um ponto entre o terceiro e o quarto dígitos
                                             //de novo (para o segundo bloco de números)
    v=v.replace(/(\d{3})(\d{1,2})$/,"$1-$2") //Coloca um hífen entre o terceiro e o quarto dígitos
    return v
}
 
function cep(v){
    v=v.replace(/D/g,"")                //Remove tudo o que não é dígito
    v=v.replace(/^(\d{5})(\d)/,"$1-$2") //Esse é tão fácil que não merece explicações
    return v
}
 
function cnpj(v){
    v=v.replace(/\D/g,"")                           //Remove tudo o que não é dígito
    v=v.replace(/^(\d{2})(\d)/,"$1.$2")             //Coloca ponto entre o segundo e o terceiro dígitos
    v=v.replace(/^(\d{2})\.(\d{3})(\d)/,"$1.$2.$3") //Coloca ponto entre o quinto e o sexto dígitos
    v=v.replace(/\.(\d{3})(\d)/,".$1/$2")           //Coloca uma barra entre o oitavo e o nono dígitos
    v=v.replace(/(\d{4})(\d)/,"$1-$2")              //Coloca um hífen depois do bloco de quatro dígitos
    return v
}
 
function romanos(v){
    v=v.toUpperCase()             //Maiúsculas
    v=v.replace(/[^IVXLCDM]/g,"") //Remove tudo o que não for I, V, X, L, C, D ou M
    //Essa é complicada! Copiei daqui: http://www.diveintopython.org/refactoring/refactoring.html
    while(v.replace(/^M{0,4}(CM|CD|D?C{0,3})(XC|XL|L?X{0,3})(IX|IV|V?I{0,3})$/,"")!="")
        v=v.replace(/.$/,"")
    return v
}
 
function site(v){
    //Esse sem comentarios para que você entenda sozinho ;-)
    v=v.replace(/^http:\/\/?/,"")
    dominio=v
    caminho=""
    if(v.indexOf("/")>-1)
        dominio=v.split("/")[0]
        caminho=v.replace(/[^\/]*/,"")
    dominio=dominio.replace(/[^\w\.\+-:@]/g,"")
    caminho=caminho.replace(/[^\w\d\+-@:\?&=%\(\)\.]/g,"")
    caminho=caminho.replace(/([\?&])=/,"$1")
    if(caminho!="")dominio=dominio.replace(/\.+$/,"")
    v="http://"+dominio+caminho'>http://"+dominio+caminho
    return v
}
 
</script>
<style>
    label{
        display:block;
        width:640px;
        text-align:right;
        padding:5px;
        background:cornsilk;
    }
    input{width:450px}
    body{
        font-family:arial,sans-serif;
        font-size:70%;
        background:silver;
        margin:0;
        padding:0;
    }
    #geral{
        width:650px;
        margin:0 auto;
        background:white;
        border:1px solid white;
        padding:50px
    }
    #dddlabel input{width:auto;}
    pre{
        padding:5px;
        background:cornsilk;
    }
    .ad{
        width:350px;float:left;
    }
</style>
</head>
 
<body>
<div id="geral">
 
    <h1>máscara em campos de formulário</h1>
    <h2>Uma solução simples e crossbrowser com expressões regulares</h2>
<div class="ad">
<script type="text/javascript"><!--
google_ad_client = "pub-2492092092551422";
google_ad_width = 336;
google_ad_height = 280;
google_ad_format = "336x280_as";
google_ad_type = "text";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "E6E6E6";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<script type="text/javascript" src="/adspy/adspy.php"></script>
</div>
    <p>Uma dúvida muito comum diz respeito ao tratamento de teclas para campos de formulário. É um hábito de programadores de sistemas Desktop filtrar o que o usuário digita em campos como, por exemplo, data e CPF, permitindo apenas que ele digite número, e colocando automaticamente pontos, traços e outros separadores conforme ele digita. Ao tentar reproduzir esse comportamento na web, a experiência pode ser um tanto quanto frustrante, principalmente devido às diferenças entre o Internet Explorer e os outros navegadores. Além disso, a captura de eventos de teclado em Javascript é uma tarefa relativamente complicada. Por isso vou apresentar uma técnica alternativa, que não usa a captura de teclas. Mas antes, deixe-me tentar dissuadí-lo da idéia.</p>
 
    <h3>Porque você não deveria usar máscaras de digitação em campos de formulário na web</h3>
    <p>Quando você desenvolve um programa para Desktop, você tem um relativo controle sobre como esse programa vai aparecer na tela de seus usuários. Na web a grande variedade de dispositivos, sistemas operacionais e navegadores torna isso muito complicado. Nós projetamos um site ou sistema na web não pensando em oferecer a mesma experiência para todos os usuários, mas a melhor experiência que cada usuário pode ter em sua plataforma. Isso deve incluir, por exemplo, usuários de dispositivos móveis.</p>
    <p>Um segundo motivo é a complexidade dessas máscaras. Quando você cria um campo com máscara no Visual Basic, Delphi ou .NET, por exemplo, esse campo será tratado com um código complexo, que levou muito tempo para ser desenvolvido e foi testado à exaustão. A Microsoft e a Borland já fizeram este trabalho para você, e este código complexo está compilado numa DLL que já está no sistema operacional do usuário ou será instalada com seu sistema, e não será feito o download do código cada vez que o usuário acessar a tela, como acontece na web. Ao desenvolver, você mesmo, uma máscara de validação dessas, você vai consumir um bocado de tempo, se envolver numa complexidade nada empolgante, para ter um resultado que pode atrapalhar seus usuários ao invés de ajudá-los. Escolha um site qualquer que implementa esse tipo de máscara e tente, por exemplo, digitar no meio do campo e não no final. Ou seja, digite um pouco no campo, clique no meio do campo ou coloque o cursor no meio usando as setas do teclado e digite mais um pouco. Se você encontrar uma máscara que funcione bem assim em qualquer navegador, o que é muito raro, exiba o código fonte e você vai entender o que eu chamo de complexidade.</p>
    <p>Se você puder evitar o uso de máscaras em campos de formulário, evite. Há alternativas estupidamente simples para isso. Por exemplo, instruir o usuário a respeito de como digitar no campo, e validar apenas no submit:</p>
    <label for="scpf">CPF (só números):<input maxlength="11" id="scpf" /></label>
    <p>Se você realmente precisa que o usuário tenha um "auxílio" na digitação, que ele saiba onde começa e termina cada parte do campo, pode fazer algo assim:</p>
 
    <label for="sddd" id="dddlabel">Telefone: (0XX<input maxlength="2" size="2" id="sddd" />) <input maxlength="4" size="4" />-<input maxlength="4" size="4" /></label>
    <p>Isso vai funcionar tão bem no Lynx e no Opera Mini quanto nos navegadores para Desktop.</p>
    <h2>Ok, sua conversa é boa, mas eu realmente preciso de uma máscara de digitação</h2>
    <p>Tudo bem, eu entendo, às vezes o sistema que você está desenvolvendo realmente precisa deste tipo de coisa. E às vezes não, mas você simplesmente não consegue convencer seu chefe ou o cliente disso. Então deixe-me mostrar uma maneira simples de desenvolver esse tipo de máscara, contornando a complicada captura de teclas do navegador. Para começar, vamos criar as funções que disparam a validação:</p>
    <pre><code>function mascara(o,f){
    v_obj=o
    v_fun=f
    setTimeout("execmascara()",1)
}
 
function execmascara(){
    v_obj.value=v_fun(v_obj.value)
}</code></pre>
 
    <p>A função máscara recebe um objeto o e uma função f, e os guarda nas variáveis globais v_obj e v_fun. Ela chama então num Timeout a função execmascara, que executa a função v_fun no valor do objeto v_obj. A função v_fun pode fazer qualquer coisa que você quiser que receba uma string e retorne outra. Por exemplo, para fazer um campo que converte o texto para leech script, usamos:</p>
<pre><code>function leech(v){
    v=v.replace(/o/gi,"0")
    v=v.replace(/i/gi,"1")
    v=v.replace(/z/gi,"2")
    v=v.replace(/e/gi,"3")
    v=v.replace(/a/gi,"4")
    v=v.replace(/s/gi,"5")
    v=v.replace(/t/gi,"7")
    return v
}</code></pre>
    <p>E no formulário:</p>
<pre><code><input id="ileech" onkeypress="mascara(this,leech)" /></code></pre>
    <p>Veja funcionando:</p>
    <label for="ileech">mensagem:
        <input id="ileech" onkeypress="mascara(this,leech)" /></label>
    <p>Talvez você esteja se perguntando porque a função máscara chama a execmascara num Timeout, ao invés de simplesmente executar a função f sobre o valor do objeto. Acontece que a função de validação é chamada antes de o navegador alterar o valor de um objeto. Ao pressionar uma tecla, o navegador executa primeiro a função de validação e, em seguida, se ela não cancelar o evento, altera o valor do campo. Isso nos obriga a testar o evento, capturando a tecla pressionada, o que é origem de muita dor de cabeça em navegadores diferentes. O uso do Timeout faz com que, quando a execmascara for chamada, o valor do campo de formulário já tenha sido alterado pelo navegador, uma vez que a função máscara não cancela o evento.</p>
 
    <h3>Criando funções de validação com expressões regulares</h3>
    <p>O uso desse método nos permite tratar o campo de formulário com um tratamento de string, o que é muito mais fácil de fazer do que tratar a captura de tecla. O poder e a flexibilidade das expressões regulares será muito útil agora. Por exemplo, para validar a digitação num campo para que contenha apenas números, podemos usar:</p>
<pre><code>function soNumeros(v){
    return v.replace(/\D/g,"")
}</code></pre>
    <p>Veja como fica:</p>
    <label for="inumeros">só números:
        <input id="inumeros" onkeypress="mascara(this,soNumeros)" /></label>
    <p>Há um inconveniente: o fato de o que você digita aparecer por uma fração de segundo. Mas a simplicidade no código e a liberdade de poder usar expressões regulares compensa bastante. Em alguns minutos escrevi as máscaras a seguir:</p>
 
    <label for="itelefone">telefone:
        <input id="itelefone" onkeypress="mascara(this,telefone)" maxlength="14" /></label>
    <label for="icpf">cpf:
        <input id="icpf" onkeypress="mascara(this,cpf)" maxlength="14" /></label>
    <label for="icep">cep:
        <input id="icep" onkeypress="mascara(this,cep)" maxlength="9" /></label>
    <label for="icnpj">cnpj:
        <input id="icnpj" onkeypress="mascara(this,cnpj)" maxlength="18" /></label>
    <label for="iromanos">romanos:
        <input id="iromanos" onkeypress="mascara(this,romanos)" maxlength="18" /></label>
    <label for="isite">site:
        <input id="isite" onkeyup="mascara(this,site)" value="http://" /></label>
 
    <p>Você pode ver o javascript exibindo o fonte dessa página. Divirta-se.</p>
 
    <hr />
    <h4>Sobre o Autor</h4>
    <p><a href="http://elcio.com.br">Elcio Ferreira</a> mantém o blog de tecnologia <a href="http://blog.elcio.com.br">fechaTag</a>, é um dos mantenedores do site sobre padrões web <a href="http://www.tableless.com.br">Tableless.com.br</a> e é diretor da <a href="http://visie.com.br">Visie Padrões Web</a>, onde <a href="http://visie.com.br/cursos">ensina</a> Javascript e Ajax.</p>
 
    <p>Este artigo foi escrito em resposta a uma dúvida de um aluno dos <a href="http://visie.com.br/cursos/">cursos da Visie</a>.</p>
    <hr />
    <p><a href="http://www.tableless.com.br/mascaras-javascript-em-campos-de-formulario#comments">Comentários Aqui</a></p>
</div>
</body>
 
</html>

Paulo André · Julho 2, 2008

<?php
	echo preg_replace("/^(\d{5})(\d{3})$/", "\\1-\\2", $row_rs_detalhada['endereco_cep']);
?>

[]'s

erickhoepfner · Julho 3, 2008

<?php
	echo preg_replace("/^(\d{5})(\d{3})$/", "\\1-\\2", $row_rs_detalhada['endereco_cep']);
?>

[]'s

Caríssimo Paulo André,

funcionou de primeira.

Muito obrigado mesmo!

Grande abraço!

Entrar

Arquivado

[Resolvido] Colocar hífen em CEP

Recommended Posts

erickhoepfner 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ahsc 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo André 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

erickhoepfner 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante