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

Question

Good afternoon, you guys!

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

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

This above JS code that should detect but is not working!

Answer 1

Just create a style when the input for :valid to leave the text on the 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

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

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