An element is jumping up when i run a JS that includes him

I’m working on a login form now, and I’m facing a problem. In the password input field, i have a “toggle eye” what toggle visibility for the password. I wrote the script and all is working fine, but when i click on that eye, it jumps up for 2-3 millimeters for an unknown reason.

Here you can try that code. Thanks!

* {
  box-sizing: border-box;
}

body {
  font-weight: 400;
  background-color: #EEEFF4;
}

body,
html,
{
  width: 100%;
  height: 100%;
}

#hide{
  display :none;
}
.eye{
  position:relative;
  float: right;
  top: 40px;
  right: 9px;
  z-index: 2;
 
}

label {
  font-weight: 500;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="form-group">
                        <label>Password</label>
                        <span class="eye">
                                <i id="show" class="fa fa-eye"></i>
                                <i id="hide" class="fa fa-eye-slash"></i> 
                            </span>
                        <input type="password" class="form-control" placeholder="*******" name="password_signin"
                            id="password_signin" />
                         </div>
                         
                         <script type="text/javascript">
    $(document).ready(function toggle(){
        $(".eye").bind("click", function(){
                var x = document.getElementById("password_signin"); //input field
                var y = document.getElementById("hide");  //hide <i> from span
                var z = document.getElementById("show");  //show <i> from span
                if(x.type === 'password'){
                    x.type = "text";
                    y.style.display = "block";
                    z.style.display = "none";
                }
                else{
                    x.type = "password";
                    y.style.display = "none";
                    z.style.display = "block";
                }
            });
        });
    </script>

Answer

In my opinion this is because of the transition between i#show and i#hide
One way to avoid this is for example omitting one i tag like this

        <i id="eye" class="fa fa-eye"></i>

        var x = document.getElementById("password_signin"); //input field
        var y = document.getElementById("eye");

        if(x.type === 'password'){
            x.type = "text";
            y.className = "fa fa-eye-slash";
        }
        else{
            x.type = "password";
            y.className = "fa fa-eye";
        }

Advertisement

Answer