Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Hiccup

Remover máscara com JQuery ...

Por , em Javascript

Recommended Posts

Hiccup    0

Hiccup
Postado

Boa tarde pessoal ...

 

Sou novato em JavaScript e mais ainda em JQuery. Estou desenvolvento um site para o negócio da minha tia e estou apanhando mais que "cachorrinho de bem" como diria minha vó.

 

Estou tentando colocar uma máscara no campo telefone. Colocar eu consegui, o que eu não consigo é removê-la.

 

Minha ideia para o campo é a seguinte:

 

Quando o usuário acessa o site e vê o formulário, dentro do <input> telefone tem a frase: "Telefone fixo ...". Assim que o usuário clica no campo para reenchê-lo, a frase "some" e entra a máscara. Beleza, fiquei feliz por conseguir isso ...

 

Porém, quando o usuário só clica no campo e logo sai sem preenchê-lo, eu não consigo fazer a frase: "Telefone fixo ..." voltar, como acontece em todos os outros campos que não possuem máscara.

 

Eu fiz um teste para que, quando o usuário clicasse no campo e saísse dele sem preencher, automaticamente fossem inseridos números e Voilà, os números apareceram formatados.

 

Dessa forma, acredito que se eu retirar a máscara quando o usuário clicar no campo, mas não preenchê-lo, eu consiga inserir novamente a frase: "Telefone fixo ...".

 

Vou colocar abaixo alguns trechos de código ...

 

Código (X)HTML ...

 

 

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

<?php date_default_timezone_set("America/Sao_Paulo"); ?>
    
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>TOTALIT</title>

        <link rel="stylesheet" media="screen" type="text/css" href="style.css" />
        <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="jquery.maskedinput.min.js"></script>
        <script type="text/javascript" src="events.js"></script>

 

 

 

Código JavaScript ...

 

 

$(document).ready(function() {

    $("#webmail").attr("target","_blank");

    $("input").focus(function(){
        $(this).css({"background-color":"#FFFFB2","color":"#000000"});
        conteudo = $(this).val();
        $(this).val("");
        
        if (conteudo == "Telefone fixo ...") {
            $("[name='telefone']").mask("(99) 9999-9999");
            
        }
    });
    $("input").blur(function(){
        $(this).css({"background-color":"#FFFFFF", "color":"#0000FF"});
        if ($(this).val() == "") {
            if (conteudo == "Telefone fixo ...") {
                $("[name='telefone']").unmask();
            }
            $(this).css("color","#999999");
            $(this).val(conteudo);
            
        }
    });

 

 

Espero que alguém possa me ajudar ... muito obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

angelorubin    142

angelorubin
Postado

Boa noite,

 

Exemplo online - http://angelorubin.besaba.com/MascaraCampo/formulario.php

 

Tenta assim:

<script type="text/javascript">
$(function() {
    $("#webmail").attr("target","_blank");
    $("#tel-fixo").on('focusin',function(){
        $(this).css({"background-color":"#FFFFB2","color":"#000000"});
        $(this).attr('placeholder','');
        $(this).mask("(99) 9999-9999");
    });
    $("#tel-fixo").on('blur',function(){
        var textoTelFixo = "Telefone Fixo";
        $(this).css({"background-color":"#FFFFFF", "color":"#0000FF"});
        var placeholder = $(this).attr('placeholder');
        if(placeholder == ''){
            $(this).unmask();
            $(this).attr('placeholder',textoTelFixo);
        }
    })
})
</script>

HTML

<input type="tel" name="tel-fixo" id="tel-fixo" placeholder="Telefone Fixo"/>

Espero que ajude.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hiccup    0

Hiccup
Postado

Funcionou ... :joia: :joia: :joia: ... muito louca esse seu exemplo, com formulário on-line e tudo, demais!!!

 

Muito obrigado angelorubin, eu já havia lido um monte de site e não havia encontrado uma solução ... agora vou até conseguir dormir ...

 

É quando capoto nessas coisas que me pergunto se levo jeito para programador ... :upset:

 

Até a próxima ...

 

 

Moderador, por favor, pode marcar como resolvido ... :rolleyes:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito