密码字段上的眼睛图标有时可见，有时不可见

Question

我有登录表单的代码密码（我使用的是bootstrap 4）

<div class="form-account-label-input">
   <label> Password <span class="star-red">&nbsp;*</span></label>
   <input type="password" id="Password" name="Password" class="w-100">                                 
</div>

当我开始插入密码时，会出现一个图标眼睛，如下所示

我没有在我的代码上设置任何眼睛图标。它是从哪里打来的？问题是这个眼睛图标有时出现有时不出现。所以我想知道它是从哪里来的禁用并在代码中自己设置一个眼睛图标？

更新

我发现我只在 Edge 浏览器上有它，而不是在 chrome 上

Answer 1

**Try this**
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
  "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap- 
  icons.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<style>
form i {
  margin-left: -30px;
  <h1>Sign In</h1>
  cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<form>
        <p>
            <label>Password:</label>
            <input type="password"
                name="password" id="password" />
            <i class="bi bi-eye-slash"
                id="togglePassword"></i>
        </p>
    </form>
</div>
<script>
    const togglePassword = document
        .querySelector('#togglePassword');

    const password = document.querySelector('#password');

    togglePassword.addEventListener('click', () => {

        // Toggle the type attribute using
        // getAttribure() method
        const type = password
            .getAttribute('type') === 'password' ?
            'text' : 'password';
            
        password.setAttribute('type', type);

        // Toggle the eye and bi-eye icon
        this.classList.toggle('bi-eye');
    });
</script>
</body>
</html>

Answer 2

您可以尝试以下代码：风格：


  /* password toggle start */
      .password-section {
         position: relative;
         display: inline-block;
      }

      .password-section .fa-eye {
         position: absolute;
         top: 76%;
         right: 22px; /* Adjust this value to control the icon's position */
         transform: translateY(-50%);
         cursor: pointer;
      }
      .password-section .fa-eye-slash {
         position: absolute;
         top: 76%;
         right: 22px; /* Adjust this value to control the icon's position */
         transform: translateY(-50%);
         cursor: pointer;
      }

   /* password toggle end */

HTML：

<div class="col-xs-12 password-section">
      
  <input class="form-control input-lg" id="password-field" name="password" type="Password">
  <span class="fa fa-eye " id="togglePassword"  ></span>

</div>

Jquery：

<script>
  $(document).ready(function () {
  
     //  Toggle  Password Start
     $("#togglePassword").removeClass("fa fa-eye").addClass("fa fa-eye-slash");
     $("#togglePassword").click(function() {
        const passwordInput = $("#password-field");
        const type = passwordInput.attr("type");

        if (type === "password") {
            passwordInput.attr("type", "text");
            $("#togglePassword").removeClass("fa fa-eye-slash").addClass("fa fa-eye");
        } else {
            passwordInput.attr("type", "password");
            $("#togglePassword").removeClass("fa fa-eye").addClass("fa fa-eye-slash");
        }
    });
    //  Toggle  Password End
    
  });

</script>

密码字段上的眼睛图标有时可见，有时不可见

问题描述投票：0回答：2

更新

2个回答

最新问题

密码字段上的眼睛图标有时可见，有时不可见

问题描述 投票：0回答：2

更新

2个回答

最新问题

问题描述投票：0回答：2