JavaScript 如何切换密码可见性

在本文中，我们将讨论如何在JavaScript中切换密码的可见性，我们还将使用HTML和CSS来为我们的网页创建一个密码可见性切换器。

方法： 创建密码可见性切换器的基本方法非常简单，我们将使用一个按钮并编写一个javascript函数，在按钮上调用该函数，该函数将切换用户对隐藏密码的可见性。

我们将如何制作密码可见性切换器？

为此，我们将在密码输入框下方添加一个按钮，当我们输入密码时，默认情况下它将被隐藏，但在操作部分，我们将使用javascript创建一个函数，当用户点击该按钮时，它将切换密码的可见性，并且按钮的文本也会在密码可见时切换为“隐藏”。在示例代码中，我们可以详细看到这些函数。

示例： 在此示例中，我们使用了上述解释的方法。

HTML

<!DOCTYPE html>
<head>
    <title>Toggle password visibility using javascript</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 15%;
            background-color: rgb(56, 56, 56);
        }
 
        .main {
            height: 360px;
            padding: 20px;
            background-color: rgb(32, 32, 32);
            border-radius: 10px;
        }
 
        .userImage {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: montserrat;
            font-size: 0.8rem;
            color: rgb(255, 255, 255);
            margin-bottom: 40px;
        }
 
        .user_input {
            display: flex;
            height: 40px;
            margin: 20px;
        }
 
        .user_input input {
            border: none;
            border-bottom: 1px solid rgb(255, 255, 255);
            outline: none;
            background-color: rgb(32, 32, 32);
            color: white;
        }
 
        .password_input {
            display: flex;
            height: 40px;
            margin: 20px;
        }
 
        .password_input input {
            border: none;
            border-bottom: 1px solid rgb(255, 255, 255);
            outline: none;
            background-color: rgb(32, 32, 32);
            color: white;
        }
 
        .login_box {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }
 
        .login_button {
            height: 30px;
            width: 100px;
            background-color: rgb(0, 0, 0);
            border-radius: 10px;
            outline: none;
            border: none;
            color: rgb(255, 255, 255);
            font-size: 12px;
            font-family: montserrat;
            cursor: pointer;
        }
 
        .login_button:hover {
            color: rgb(0, 0, 0);
            background-color: #fff;
            transform: translateY(-1px);
        }
 
        #hide_pass {
            display: none;
        }
 
        .popup {
            position: absolute;
            height: 200px;
            width: 350px;
            background-color: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
 
        .popup h2 {
            font-size: 20px;
            font-family: montserrat;
            margin: 20px;
        }
 
        .popup {
            display: none;
        }
 
        .show_or_hide {
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        #show_pass,
        #hide_pass {
            height: 30px;
            width: 70px;
            background-color: rgb(0, 0, 0);
            color: white;
            border-radius: 10px;
            border: none;
            outline: none;
        }
 
        #show_pass:hover,
        #hide_pass:hover {
            color: rgb(0, 0, 0);
            background-color: #fff;
            transform: translateY(-1px);
        }
    </style>
</head>
 
<body>
    <div class="main">
        <div class="userImage">
            <h1>GeeksforGeeks</h1>
        </div>
        <div class="user_input">
            <input type="text"
                   id="user"
                   placeholder="Username" />
        </div>
        <div class="password_input">
            <input type="password"
                   id="pass"
                   placeholder="Password" />
        </div>
        <div class="show_or_hide">
            <button id="show_pass"
                    onclick="togglePassword();">
                Show
            </button>
            <button id="hide_pass"
                    onclick="togglePassword();">
                Hide
            </button>
        </div>
        <div class="login_box">
            <button class="login_button"
                    onclick="openPopup(),reload()">
                Login
            </button>
        </div>
    </div>
    <div class="popup" id="msg">
        <h2>User logged in successfully!</h2>
    </div>
    <script>
        // This function is used to toggle the password visibility.
        function togglePassword() {
            toggleIcon();
            var x = document.getElementById("pass");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }
        // This function will toggle the show or hide password icon.
        function toggleIcon() {
            var x = document.getElementById("show_pass");
            var y = document.getElementById("hide_pass");
            if (x.style.display === "none") {
                x.style.display = "block";
                y.style.display = "none";
            } else {
                x.style.display = "none";
                y.style.display = "block";
            }
        }
        // This function will open the popup. 
        // that will show the message
        // that user logged in successfully
        function openPopup() {
            if (document.getElementById("user").value === ""
                || document.getElementById("pass").value === "") {
                alert("Please enter username and password");
            } else {
                var x = document.getElementById("msg");
                x.style.display = "flex";
                setTimeout(function () {
                    x.style.display = "none";
                }, 1000);
            }
        }
        // This function will reload the page when 
        // the user clicks on 
        // the login button
        function reload() {
            setTimeout(function () {
                window.location.reload();
            }, 1200);
        }
    </script>
</body>
</html>