如何使用 Bootstrap-icons 在表单中切换密码可见性？

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

在本文中，我们将学习如何使用 Bootstrap 切换密码可见性。

方法：

• 我们将使用几类 Bootstrap 图标——bi、bi-eye-slash和 bi-eye。
• 使用 JavaScript 切换这些类。
• 我们将切换密码输入字段的类型（文本到密码和密码到文本）。

需要导入的文件：

对于输入字段中的图标（眼睛图标）

为表单元素设置样式，如按钮、添加填充等

Javascript函数说明：

• 我们使用 getAttribute() 方法获取密码的 id 并确定其类型。在创建事件（点击）时完成此提取。
• 如果是文本，则将其转换为密码。
• 如果是密码，则将其转换为文本。
• 使用setAttribute() 方法完成转换。

HTML

  

  
    Toggle Password Visibility
    
    
  
    
        form i {
            margin-left: -30px;
            cursor: pointer;
        }
    

  

    
        Sign In
        
            
                Username:
                
            
  
            
                Password:
                
                
            
  
            
                Log In
            
        
    
  
    
        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');
        });
    

  

输出：