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

在本文中，我们将学习如何使用HTML和JavaScript切换密码可见性。密码是那些以******显示的输入类型。可以通过添加一个眼睛图标的功能将密码显示给用户。

方法： 将实现以下方法来切换密码的可见性：

我们将展示如何使用两个图片图标”eye.png”和”eyeslash.png”。
使用JavaScript来切换这些图片。
我们将切换密码输入框的类型（文本->密码，密码->文本）。

示例： 在这个示例中，我们将看到如何使用HTML和JavaScript切换密码的可见性。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h2 style="color:green"> 
        GeeksforGeeks 
    </h2> 
      
    <div class="col-sm-6"> 
        <form method="post" class="form-group "> 
            Username 
            <input type="text" name="username" 
                autofocus="" autocapitalize="none" 
                autocomplete="username" required=""
                id="id_username" class="form-control"> 
                  
            Password 
            <input type="password" name="password" 
                class="form-control" 
                autocomplete="current-password" required=""
                id="id_password"> 
  
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210917150049/eyeslash-300x240.png"
                width="1.8%" height="1%" 
                style="margin-left: -5%;display:inline; 
                vertical-align: middle"  
                id="togglePassword"> 
  
            <button type="submit" class="btn btn-primary"> 
                Login 
            </button> 
        </form> 
    </div> 
</body> 
  
<script> 
    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"; 
        } 
    }); 
</script> 
  
</html>

输出：

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