注册账号场景下密码框密文明文切换的实现方式

最近开发新项目，用户注册界面需要填写密码，密码的显示形式为密文状态，但是在确认密码时偶尔可能会出现密码设置过于复杂，忘记设置的是什么导致两次输入不一致，注册不通过的情况，为此查询了下比较可行的解决方案，在此记录一下！

方法一：

要实现密码框右侧点击查看明文的功能，可以使用JavaScript来切换密码框的type属性。默认情况下，密码框的type是password，显示为密文。当用户点击右侧的查看明文按钮时，可以将其改为text类型，显示密码的明文。下面是实现该功能的代码：

HTML代码片段：

html 复制代码

<div class="mb-3">
  <label for="setting-input-3" class="form-label">密码</label>
  <div class="input-group">
    <input type="password" class="form-control" id="txtUserPwd" placeholder="请输入密码" value=" " required>
    <span class="input-group-text" id="togglePassword1" style="cursor: pointer;">👁️</span>
  </div>
</div>

<div class="mb-3">
  <label for="setting-input-3" class="form-label">确认密码</label>
  <div class="input-group">
    <input type="password" class="form-control" id="txtUserPwd2" placeholder="请再输入一次密码" value=" " required onchange="change()">
    <span class="input-group-text" id="togglePassword2" style="cursor: pointer;">👁️</span>
  </div>
</div>

JavaScript代码片段：

javascript 复制代码

document.getElementById('togglePassword1').addEventListener('mousedown', function() {
  document.getElementById('txtUserPwd').type = 'text'; // 显示明文
});

document.getElementById('togglePassword1').addEventListener('mouseup', function() {
  document.getElementById('txtUserPwd').type = 'password'; // 恢复密文
});

document.getElementById('togglePassword1').addEventListener('mouseleave', function() {
  document.getElementById('txtUserPwd').type = 'password'; // 鼠标离开时恢复密文
});

document.getElementById('togglePassword2').addEventListener('mousedown', function() {
  document.getElementById('txtUserPwd2').type = 'text'; // 显示明文
});

document.getElementById('togglePassword2').addEventListener('mouseup', function() {
  document.getElementById('txtUserPwd2').type = 'password'; // 恢复密文
});

document.getElementById('togglePassword2').addEventListener('mouseleave', function() {
  document.getElementById('txtUserPwd2').type = 'password'; // 鼠标离开时恢复密文
});

说明：

1. HTML部分：

○ 使用<span>元素来显示一个小的眼睛图标（"👁️"），作为查看密码的按钮。该按钮会被放置在密码框的右侧。

○ 使用<div class="input-group">来确保密码框和按钮在同一行内显示。

2. JavaScript部分：

○ 为每个密码框的按钮添加mousedown、mouseup和mouseleave事件监听器：

■ mousedown：当鼠标按下时，将密码框的type设置为text，显示明文。

■ mouseup和mouseleave：当鼠标松开或移出时，将密码框的type设置为password，恢复密文。

这样，点击"👁️"图标时会显示密码的明文，松开鼠标或离开按钮时会恢复为密文。

实现效果：

方法二：

要在密码框的右侧添加一个点击查看明文的按钮，并且支持在松开鼠标时恢复密文，可以使用 JavaScript 来控制密码框的 type 属性，并结合事件监听器来实现。以下是实现这一功能的代码示例：

功能实现代码片段：

html 复制代码

<div class="mb-3">
    <label for="setting-input-3" class="form-label">密码</label>
    <div class="input-group">
        <input type="password" class="form-control" id="txtUserPwd" placeholder="请输入密码" value=" " required>
        <button class="btn btn-outline-secondary" type="button" id="togglePwd" onmousedown="showPassword()" onmouseup="hidePassword()">👁️</button>
    </div>
</div>

<div class="mb-3">
    <label for="setting-input-3" class="form-label">确认密码</label>
    <div class="input-group">
        <input type="password" class="form-control" id="txtUserPwd2" placeholder="请再输入一次密码" value=" " required onchange="change()">
        <button class="btn btn-outline-secondary" type="button" id="togglePwd2" onmousedown="showPassword2()" onmouseup="hidePassword2()">👁️</button>
    </div>
</div>

<script>
    // 显示密码功能
    function showPassword() {
        document.getElementById("txtUserPwd").type = "text"; // 显示密码
    }

    // 隐藏密码功能
    function hidePassword() {
        document.getElementById("txtUserPwd").type = "password"; // 隐藏密码
    }

    // 显示确认密码功能
    function showPassword2() {
        document.getElementById("txtUserPwd2").type = "text"; // 显示确认密码
    }

    // 隐藏确认密码功能
    function hidePassword2() {
        document.getElementById("txtUserPwd2").type = "password"; // 隐藏确认密码
    }
</script>

说明：

onmousedown 事件：当用户按下按钮时，触发 showPassword() 或 showPassword2() 函数，显示密码。
onmouseup 事件：当用户松开按钮时，触发 hidePassword() 或 hidePassword2() 函数，恢复密码框为密文。
在按钮上用 👁️ 表示查看密码，当然你也可以使用其他图标。

解释：

● showPassword() 和 hidePassword()：分别用于显示和隐藏密码框的密码内容。

● 同样，showPassword2() 和 hidePassword2() 也实现了相同功能，用于确认密码框。

效果：

● 用户按下眼睛按钮时，密码会变成明文显示。

● 用户松开按钮时，密码恢复为密文。

实现效果：

如果各位大神还有其他更好的实现方式欢迎留言交流~~