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>