1

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.

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

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!

1
  • Realmente, não dá pra evitar o JS, mas como não sei muito aprofundado, prefiro evitar. Fico muito perdido com JS, me surgem muitas dúvidas, vários problemas e não é o ideal, já que é frustrante ver o trabalho não ir para frente. 3/09/2018 às 22:20

1 Resposta 1

0

É só criar um estilo quando o input for :valid para deixar o texto no alto

Veja como fica no modelo abaixo com o seu código

  .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;
  }
  /* estilo para deixar o texto no alto */
  .effect:valid ~ h3, .has-content.effect ~ h3{
      top: -16px; font-size: 12px; color: #4CAF50; transition: 0.3s;
  }
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

  <br>
  <br>
  <br>
<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>

EDIT

Modelo para quando o campo for :invalid

$(document).ready(function() {
    $('input').blur(function() {
    if ($(this).val())
        $(this).addClass('used');
    else
        $(this).removeClass('used');
    });
});
.group { 
	position: relative; 
	margin-bottom: 20px;
	margin-bottom: 1.25rem; 
}
label {
      color: #333333;
      font-size: 16px; font-size: 1rem;
      font-weight: normal;
      font-family: Lato, Arial, "Helvetica Neue", Helvetica, sans-serif;
      position: absolute;
      pointer-events: none;
      top: 12px; top: 0.75rem;
      transition: 0.2s ease all;
}
input {
	color: #666666;
	font-size: 16px;
	font-family: Lato, Arial, "Helvetica Neue", Helvetica, sans-serif;
	padding: 14px 0 8px 0; padding: 0.875rem 0 0.5rem 0;
	display: block;
	outline: none;
	border: none;
	width: 100%;
	border-bottom: thin solid #ffffff;
}

.bar { 
	position: relative; 
	display: block; 
	width: 100%; 
}
.bar:before {
	content: "";
	height: 1px;
	width: 0;
	bottom: 0px;
	position: absolute;
	transition: 0.2s ease all;
}
.bar:before { 
	left: 0%; 
}

input:focus ~ .bar:before {
	width: 100%;
}
input:focus ~ label,
input.used ~ label {
	top: -8px; top: -0.5rem;
	font-size: 12px; font-size: 0.75rem;
	color: #666;
}

input:valid ~ label,
input:valid.used ~ label {
	color: #1B5E20;
}
input:valid { border-bottom: 1px solid #2E7D32; }

input:valid ~ .bar:before {
	background: #2E7D32 !important;
}

input:invalid ~ label,
input:invalid.used ~ label {
	color: #C62828;
}
input:invalid { border-bottom: 1px solid red; }

input:invalid ~ .bar:before {
	background: #C62828 !important;
}

input:invalid:focus ~ label{
	color: #2962FF;
}
input:invalid:focus ~ .bar:before {
	background: #2979FF !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="group">
    <input id="email" type="email" required>
    <label>Email</label>
    <span class="bar"></span>
</div>

6
  • Deu certo! Obrigado! 2/09/2018 às 18:38
  • @GiuseppeNunes legal que deu certo, lembre-se que quando vc fizer as validações seria legal vc tb fazer os estilos quando o input for :invalid Vc pode ler sobre isso aqui developer.mozilla.org/pt-BR/docs/Web/CSS/:invalid
    – hugocsl
    2/09/2018 às 18:45
  • Agradeço pelo material! 2/09/2018 às 18:49
  • Eu tive um outro problema, quando é colocado algo no email que não é um email, por exemplo qualquer outro caractere sem o "@" e o ".com" no final o efeito não é cancelado. Ao me ver é porque ele não é válido, já que no type=email ele precisa ter "@" e ".com" pra ser um email, certo? Tem como contornar isso? 2/09/2018 às 18:56
  • @GiuseppeNunes é por ai mesmo. quando é type email precisa do @ ou então fica como invalido. O problema é que quando um campo está vazio sem nada dentro ele já fica como invalido caso tenha tb atributo required.... Veja que eu editei minha resposta com uma solução pra isso. Mas talvez vc tenha que mudar a estrutura html do seu forma para funcionar direito. Essa opção usa jQuery. Sem jQueri vc pode usar a pseudo-classe placeholde-shown, mas não funcionaria no IE ou Edge
    – hugocsl
    2/09/2018 às 19:30

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 .