微信小程序如何实现密码显示与隐藏的睁眼闭眼功能

前言

在实际开发中，我们经常要面对一些需要密码输入的场景。在输入密码的时候，我们为了隐藏密码，一般都会使用 type="password" 的 input 或者类似的密码框组件。但是，有时候，我们需要提供密码显示和隐藏的开关，以方便用户观察自己所输入的密码是否正确。那么，如何实现密码的显示与隐藏的睁眼闭眼功能呢？下面，我们将介绍两种实现方式。

第一种方式：input 的 type 属性切换

这种方式比较常见，就是通过修改 input 组件的 type 属性来实现密码的显示和隐藏。当 type 属性为 password 的时候，输入的字符将会被替换成“*”或“●”等字符。当我们将 type 属性修改为其它值的时候，输入的字符将会以明文的形式显示。

下面是这种方式的代码实现：

function togglePasswordVisibility() {
    let passwordInput = document.getElementById("password");
    let passwordEyeIcon = document.getElementById("passwordEyeIcon");

    if (passwordEyeIcon.classList.contains("fa-eye")) {
        passwordEyeIcon.classList.remove("fa-eye");
        passwordEyeIcon.classList.add("fa-eye-slash");
        passwordInput.type = "text";
    } else {
        passwordEyeIcon.classList.remove("fa-eye-slash");
        passwordEyeIcon.classList.add("fa-eye");
        passwordInput.type = "password";
    }
}

上面的代码中，我们使用了 Font Awesome 图标库中的“eye”和“eye-slash”图标来表示密码的显示和隐藏状态。我们通过判断这两个图标中的哪个被使用，以确定当前密码框应该是以明文还是密文的形式展示。

第二种方式：动态修改输入框的 value 属性

另一种实现方式是动态修改输入框的 value 属性。当我们需要显示密码的时候，我们会将输入框中的字符全部显示出来；当需要隐藏密码的时候，我们将输入框中的字符全部替换成“*”或“●”等字符。

下面是这种方式的代码实现：

function togglePasswordVisibility() {
    let passwordInput = document.getElementById("password");
    let passwordEyeIcon = document.getElementById("passwordEyeIcon");

    if (passwordInput.type === "text") {
        passwordEyeIcon.classList.remove("fa-eye-slash");
        passwordEyeIcon.classList.add("fa-eye");

        passwordInput.type = "password";
        passwordInput.value = passwordInput.value.replace(/./g, "●");
    } else {
        passwordEyeIcon.classList.remove("fa-eye");
        passwordEyeIcon.classList.add("fa-eye-slash");

        passwordInput.type = "text";
        passwordInput.value = passwordInput.value.replace(/●/g, "");
    }
}

上面的代码中，我们使用了正则表达式将输入框中的所有字符都替换成“●”字符，以实现密码隐藏的效果。

总结

通过以上两种方式，我们可以实现密码的显示与隐藏的睁眼闭眼功能。其中，第一种方式更为常见，因为它只需要修改 input 组件的 type 属性即可，比较简单。而第二种方式则需要动态修改输入框的 value 属性，稍微有点麻烦。不过，这两种方式都可以实现相同的效果，具体使用哪一种方式，根据实际需求决定即可。