如何使用 jQuery 单击眼睛图标时显示和隐藏密码，并且密码（新密码和确认密码）都应该匹配

Question

[在此输入图像描述](https://i.stack.imgur.com/ZuIPX.jpg)

如何使用 jQuery 单击眼睛图标时显示和隐藏密码，并且密码（新密码和确认密码）应匹配

Answer 1

我的项目中有一个实现，我在这里分享，你也可以使用它，让我知道它是否适合你：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show/Hide Password</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        .password-container {
            position: relative;
        }

        .password-input {
            padding-right: 30px;
        }

        .eye-icon {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="password-container">
    <label for="new-password">New Password:</label>
    <input type="password" id="new-password" class="password-input" required>
    <span class="eye-icon" id="toggle-new-password">👁️</span>
</div>

<div class="password-container">
    <label for="confirm-password">Confirm Password:</label>
    <input type="password" id="confirm-password" class="password-input" required>
    <span class="eye-icon" id="toggle-confirm-password">👁️</span>
</div>

<script>
    $(document).ready(function () {
        // Show/hide password for new password input
        $('#toggle-new-password').on('click', function () {
            togglePasswordVisibility('#new-password');
        });

        // Show/hide password for confirm password input
        $('#toggle-confirm-password').on('click', function () {
            togglePasswordVisibility('#confirm-password');
        });

        // Function to toggle password visibility
        function togglePasswordVisibility(passwordField) {
            var passwordInput = $(passwordField);
            var fieldType = passwordInput.attr('type');
            var newFieldType = (fieldType === 'password') ? 'text' : 'password';
            passwordInput.attr('type', newFieldType);
        }

        // Check if new and confirm passwords match
        $('#confirm-password, #new-password').on('keyup', function () {
            var newPassword = $('#new-password').val();
            var confirmPassword = $('#confirm-password').val();

            if (newPassword === confirmPassword) {
                // Passwords match
                // You can add your code here if needed
            } else {
                // Passwords do not match
                // You can add your code here if needed
            }
        });
    });
</script>

</body>
</html>

如何使用 jQuery 单击眼睛图标时显示和隐藏密码，并且密码（新密码和确认密码）都应该匹配

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

1个回答

最新问题

如何使用 jQuery 单击眼睛图标时显示和隐藏密码，并且密码（新密码和确认密码）都应该匹配

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

1个回答

最新问题

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