0

inserir a descrição da imagem aqui

Boa noite. Observem a imagem acima, eu tenho um formulário e nele uso labels que se fixam no topo (exemplo do input CEP ali) quando digito algo neles (evento input do JS). Até ai tudo bem, o problema é que eu tenho um JS que busca o endereço automaticamente quando eu digito o CEP e preenche pra mim os inputs, e com isso, as labels não fixam no topo (porque eu não digitei nada pra ativar o evento input).

Queria saber se tem como (claro que tem) fixar essas labels assim que eu desse um onblur no campo CEP, e voltar elas para o lugar de origem quando os inputs estivessem vazios.

Segue os códigos (não consegui fazer o JQuery funcionar aqui, mas o código está certo):

// fixar descrição do campo
function fixarDescricao() {
    var campo = $('.campo-formulario');
    var descricao = $('.descricao-campo');
    campo.on('input',function(){
        var descricaoAtual = $(this).parent().find('.descricao-campo');
       if($(this).val().length > 0){
           descricaoAtual.addClass('descricao-fixa');
       } else{
           descricaoAtual.removeClass('descricao-fixa');
       }
    });  
}

//busca o cep
function limpa_formulário_cep() {
                //Limpa valores do formulário de cep.
                document.getElementById('logradouro').value=("");
                document.getElementById('estado').value=("");
                document.getElementById('cidade').value=("");
                document.getElementById('bairro').value=("");
        }

        function meu_callback(conteudo) {
            if (!("erro" in conteudo)) {
                //Atualiza os campos com os valores.
                document.getElementById('logradouro').value=(conteudo.logradouro);
                document.getElementById('estado').value=(conteudo.uf);
                document.getElementById('cidade').value=(conteudo.localidade);
                document.getElementById('bairro').value=(conteudo.bairro);
            } //end if.
            else {
                //CEP não Encontrado.
                limpa_formulário_cep();
                alert("CEP não encontrado.");
            }
        }

        function pesquisacep(valor) {

            //Nova variável "cep" somente com dígitos.
            var cep = valor.replace(/\D/g, '');

            //Verifica se campo cep possui valor informado.
            if (cep != "") {

                //Expressão regular para validar o CEP.
                var validacep = /^[0-9]{8}$/;

                //Valida o formato do CEP.
                if(validacep.test(cep)) {

                    //Preenche os campos com "..." enquanto consulta webservice.
                    document.getElementById('logradouro').value="...";
                    document.getElementById('estado').value="...";
                    document.getElementById('cidade').value="...";
                    document.getElementById('bairro').value="...";

                    //Cria um elemento javascript.
                    var script = document.createElement('script');

                    //Sincroniza com o callback.
                    script.src = 'https://viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback';

                    //Insere script no documento e carrega o conteúdo.
                    document.body.appendChild(script);

                } //end if.
                else {
                    //cep é inválido.
                    limpa_formulário_cep();
                    alert("Formato de CEP inválido.");
                }
            } //end if.
            else {
                //cep sem valor, limpa formulário.
                limpa_formulário_cep();
            }
        };
input, select {
    outline: none;
    width: 100%;
    border: 1px solid #999;
    height: 45px;
    padding: 0 15px;
    font-family: 'Texto';
    color: #222;
    font-size: 105%;
    background: none;
    z-index: 3;
    margin-bottom: 20px;
    border-radius: 6px;
}

.container-campo {
    width: 100%;
    position: relative;
}

.descricao-campo {
    position: absolute;
    left: 15px;
    top: 10px;
    transition: all .2s;
    cursor: text;
    z-index: 1;
    -webkit-user-select: none;
       -moz-user-select: -moz-none;
        -ms-user-select: none;
            user-select: none;
}

.descricao-fixa {
    top: -10px;
    left: 8px;
    transition: all .2s;
    z-index: 3;
    background: #fff;
    padding: 0 5px;
    font-size: 80%;
    font-weight: bold;
}

input:focus ~ .descricao-campo , select:focus ~ .descricao-campo {
    top: -10px;
    left: 8px;
    transition: all .2s;
    z-index: 3;
    background: #fff;
    padding: 0 5px;
    font-size: 80%;
    color: dodgerblue;
    font-weight: bold;
}

input:focus , select:focus {
    border: 2px solid dodgerblue; 
}

.campos-dados-funcionario, .campos-dados-endereco, .campos-dados-venda {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 30px;
}

.dados-funcionario, .dados-endereco, .dados-venda {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: slideUp 1.3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="dados-endereco">
                                <p class="titulo-secao">endereço e contato</p>
                                <div class="campos-dados-endereco">
                                    <div class="container-campo">
                                        <input type="text" name="cep" class="campo-formulario" id="cep" onblur="pesquisacep(this.value);" required>
                                        <label class="descricao-campo" for="cep">CEP<span class="campo-obrigatorio">*</span></label>
                                    </div>
                                    <div class="container-campo">
                                        <input type="text" name="logradouro" class="campo-formulario" id="logradouro" required>
                                        <label class="descricao-campo" for="logradouro">Logradouro<span class="campo-obrigatorio">*</span></label>
                                    </div>
                                    <div class="container-campo">
                                        <input type="number" name="numero_casa" class="campo-formulario" id="numero_casa" required>
                                        <label class="descricao-campo" for="numero_casa">Número<span class="campo-obrigatorio">*</span></label>
                                    </div>
                                    <div class="container-campo">
                                        <input type="text" name="complemento" class="campo-formulario" id="complemento">
                                        <label class="descricao-campo" for="complemento">Complemento</label>
                                    </div>
                                    <div class="container-campo">
                                        <input type="text" name="estado" class="campo-formulario" id="estado" required>
                                        <label class="descricao-campo" for="estado">Estado<span class="campo-obrigatorio">*</span></label>
                                    </div>
                                    <div class="container-campo">
                                        <input type="text" name="cidade" class="campo-formulario" id="cidade" required>
                                        <label class="descricao-campo" for="cidade">Cidade<span class="campo-obrigatorio">*</span></label>
                                    </div>
                                    <div class="container-campo">
                                        <input type="text" name="bairro" class="campo-formulario" id="bairro" required>
                                        <label class="descricao-campo" for="bairro">Bairro<span class="campo-obrigatorio">*</span></label>
                                    </div>
                                    <div class="container-campo">
                                        <input type="text" name="email" class="campo-formulario" id="email">
                                        <label class="descricao-campo" for="email">E-mail</label>
                                    </div>
                                    <div class="container-campo">
                                        <input type="text" name="telefone" class="campo-formulario" id="telefone">
                                        <label class="descricao-campo" for="telefone">Telefone</label>
                                    </div>
                                    <div class="container-campo">
                                        <input type="text" name="celular" class="campo-formulario" id="celular">
                                        <label class="descricao-campo" for="celular">Celular</label>
                                    </div>
                                </div>
                            </section>

2
  • Depois que a função "pesquisacep" for executada, tenta chamar o evento de "keydown" para cada input que foi alterado.
    – RDyego
    Commented 21/03/2019 às 11:35
  • Cara eu sou bem ruim com JS, teria como me dar um exemplo de como eu podia fazer isso?
    – Sallazar
    Commented 21/03/2019 às 15:26

1 Resposta 1

1
$(document).ready(function() {
  $(".campo-formulario").on("keydown change", function() {
    var elem = $(this);
    var siblings = elem.siblings();
    if (elem.val().length > 0) {
      siblings.addClass('focused');
    } else {
      siblings.removeClass('focused');
    }
  });
});

alterei:

document.getElementById('logradouro').value = (conteudo.logradouro);

para:

 $("#logradouro").val(conteudo.logradouro).keydown();

Coloquei no plunker, testa aqui

4
  • isso quase funcionou, mas eu precisava que a classe "focused" fosse adicionada sem eu precisar dar um focus no campo, teria que ativar quando eu saisse do campo CEP
    – Sallazar
    Commented 21/03/2019 às 16:40
  • alterei, testa de novo.
    – RDyego
    Commented 21/03/2019 às 16:47
  • agora sim!! muito obrigado manoo.
    – Sallazar
    Commented 21/03/2019 às 16:51
  • massa s2, se deu certo, aceita como resposta.
    – RDyego
    Commented 21/03/2019 às 16:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .