时间戳

首页 > 解决方案 > 当我运行一个包含他的 JS 时，一个元素正在跳跃

javascript - 当我运行一个包含他的 JS 时，一个元素正在跳跃

问题描述

我现在正在处理登录表单，但遇到了问题。在密码输入字段中，我有一个“切换眼睛”，用于切换密码的可见性。我编写了脚本，一切正常，但是当我点击那只眼睛时，它会因未知原因跳起 2-3 毫米。

在这里您可以尝试该代码。谢谢！

* {
  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>

标签： javascriptphphtmljquerycss

解决方案

i#show在我看来，这是因为和之间的过渡i#hide
避免这种情况的一种方法是例如省略一个 i 标签

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

推荐阅读