如何使用 HTML 和 JavaScript 切换密码可见性？

密码是那些显示为******的输入类型。可以通过添加眼睛图标的功能向用户显示，以便用户可以看到密码。

方法

• 我们将展示两个图像图标“eye.png”和“eyeslash.png”的使用
• 使用 JavaScript 切换这些图像。
• 我们将切换类型 密码输入字段（文本->密码和密码->文本）

例子：

HTML

  

    
        GeeksforGeeks
    
      
    
        
            Username
            
                  
            Password
            
  
            
  
            
                Login
            
        
    

  

    const togglePassword = 
        document.querySelector('#togglePassword');
          
    const password = document.querySelector('#id_password');
  
    togglePassword.addEventListener('click', function (e) {
  
        // Toggle the type attribute
        const type = password.getAttribute(
            'type') === 'password' ? 'text' : 'password';
        password.setAttribute('type', type);
  
        // Toggle the eye slash icon
        if (togglePassword.src.match(
"https://media.geeksforgeeks.org/wp-content/uploads/20210917150049/eyeslash.png")) {
            togglePassword.src =
"https://media.geeksforgeeks.org/wp-content/uploads/20210917145551/eye.png";
        } else {
            togglePassword.src =
"https://media.geeksforgeeks.org/wp-content/uploads/20210917150049/eyeslash.png";
        }
    });

  

输出：

切换密码字段