CSS - Um resultado no FF e outro no Chrome ...

[Hiccup 0]

Boa noite pessoal,

 

Depois de muita luta, terminei o site da empresa da minha tia ... ufa ... O problema é que não consigo entender onde está o problema do meu CSS.

 

O site funciona perfeitamente no Firefox, mas o formulário tem um pequeno problema no Chrome, Ópera e Safari ...

 

No campo telefone, eu utilizo uma máscara com JQuery. Quando o usuário acessa o campo, a cor da fonte é #000000 e quando ele clica fora do campo, a cor da fonte é #777777. O problema é que nos navegadores, fora o Firefox, a cor da fonte é mais clara e não sei o que está acontecendo.

 

Vou postar o código CSS e o JQuery ...

 

CSS ...

 

* {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    margin: 0;
    padding: 0;
    color: #777777;
}
.inputOFF {
    background-color: #FFFFFF;
    color: #777777;
    border:solid 1px #999999;
    font-size: 0.8em;
    height: 20px;
    width: 238px;
    padding-top: 1px;
    margin-left: 1px;
    padding-left: 1px;
}

.inputON {
    background-color: #FFFFB2;
    color: #000000;
    border:solid 1px #999999;
    font-size: 0.8em;
    height: 20px;
    width: 238px;
    padding-top: 1px;
    margin-left: 1px;
    padding-left: 1px;
}

.inputOK {
    background-color: #FFFFFF;
    color: #000000;
    border:solid 1px #999999;
    font-size: 0.8em;
    height: 20px;
    width: 238px;
    padding-top: 1px;
    margin-left: 1px;
    padding-left: 1px;
}

 

 

JQuery ...

 

    $("[name='telefone']").on("focusin",function(){
        $(this).removeClass("inputOFF").addClass("inputON");
        $(this).attr("placeholder","");
        $(this).mask("(99) 9999-9999");
    });
    $("[name='telefone']").on("blur",function(){
         var textoTelFixo = "Telefone fixo ...";
        var placeholder = $(this).attr("placeholder");
        
        if (placeholder == "") {
            $(this).unmask();
            $(this).removeClass("inputON").addClass("inputOFF");
            $(this).attr("placeholder",textoTelFixo);
        } else {
            $(this).removeClass("inputON").addClass("inputOK");
        }
    })

 

 

Caso alguém queira ver o site no ar, é o www.totalit.com.br/web ...

 

Todos os campos funcionam normalmente, menos o do telefone. Seria algum problema de efeito cascata ou algo assim?!

 

Obrigado pela ajuda,

Hiccup

[Wanderson Valerio 102]

O seu script jQuery que está fazendo isso, ele adiciona uma máscara depois que o campo perde o foco... Remova isso e use o masked input => http://digitalbush.com/projects/masked-input-plugin/ Pode remover esse código seu jQuery todo, não precisa disso tudo. O masked input é bem mais simples.

[Hiccup 0]

O seu script jQuery que está fazendo isso, ele adiciona uma máscara depois que o campo perde o foco... Remova isso e use o masked input => http://digitalbush.com/projects/masked-input-plugin/ Pode remover esse código seu jQuery todo, não precisa disso tudo. O masked input é bem mais simples.

 

Olá Wanderson,

 

Mas é exatamente esse plugin que eu estou utilizando ...

 

 

<script type="text/javascript" src="jquery.maskedinput.min.js"></script>

 

Eu também pensei que poderia ser isso. Como a máscara não é removida, ela gera um conflito no CSS (não sei se é isso mesmo que acontece). Eu já testei incluindo o alert para ver se havia algo no campo, mas ele retorna vazio ... já li um monte de sites e não consegui arrumar ... :upset:

[Wanderson Valerio 102]

Então remova toda o código que você tem, e faça:

$(function($){
    $('#meuCampoDeTelefone').mask('(99) 9999-9999');
};

Só precisa disso, o resto não é requerido.

[Hiccup 0]

Se eu remover todo o código, perco o efeito que estou trabalhando ...

[Hiccup 0]

Consegui resolver com a ajudar de um colega do forum ...