Boa tarde, galera!
Estou com o seguinte problema: meu input faz um efeito quando é selecionado (como mostra o primeiro print) e termina o efeito quando tira o foco dele (como mostra o segundo print), mas caso eu coloque algum caractere e tire o foco, o texto sobrepõe o conteúdo (como mostra o terceiro print). Tem um código JS que detecta caso tenha algo no input para não fazer o efeito, mas não está funcionando. Gostaria de uma ajuda se possível. Os códigos estão abaixo.
Html:
<div class="col-3 input-effect">
<i class="fa fa-lock" aria-hidden="true"></i>
<input type="password" class="effect" placeholder="" name="senha" required>
<h3>Insira sua senha</h3>
<span class="focus-border"></span>
</div>
CSS:
.effect{
position: relative;
background-color: transparent;
}
.effect ~ .focus-border{
position: absolute;
margin-left: 49.4px;
bottom: 0; left: 50%;
width: 0;
height: 2px;
background-color: #4CAF50;
transition: 0.4s;
z-index: 2;
}
.effect:focus ~ .focus-border,
.has-content.effect ~ .focus-border{
width: 80%; transition: 0.4s; left: 0;
}
.effect ~ h3{
position: absolute; margin-left: 48px; width: 100%; top: 8px; color: #aaa; transition: 0.3s; letter-spacing: 0.5px; cursor: default;
}
.effect:focus ~ h3, .has-content.effect ~ h3{
top: -16px; font-size: 12px; color: #4CAF50; transition: 0.3s;
}
JS:
$(window).load(function(){
$(".col-3 input").val("");`
$(".input-effect input").focusout(function(){
if($(this).val() != ""){
$(this).addClass("has-content");
}else{
$(this).removeClass("has-content");
}
})
});
Esse código JS acima que deveria detectar, mas não está funcionando!