Do not "finish" the effect when you have something in the input

Question

Do not "finish" the effect when you have something in the input

Navigation

#1 by (0 votes)

1

Good afternoon, guys!

I have the following problem: my input has an effect when it is selected (as the first print shows) and ends the effect when it takes focus from it (as the second print shows), but if I put some character and focus, the text overlaps the content (as shown in the third print). It has a JS code that detects if it has something in the input to not make the effect, but it is not working. I would like some help if possible. The codes are below.

Html:

<divclass="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");
            }
        })
    });

That JS code above should detect, but it is not working!

javascript html css

asked by anonymous 02.09.2018 / 20:13

1 answer

Help with Visual G How to add a calendar in the Frame or Panel in Java

score 0 · Accepted Answer

Just create a style when input is :valid to leave text on top

See how it looks in the template below with your code

  .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

Template for when the field is :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><divclass="group">
    <input id="email" type="email" required>
    <label>Email</label>
    <span class="bar"></span>
</div>