不删代码干掉注册密码二次确认文本框

9527 · 發表於 2023-12-7 11:51:50

简化下注册项目，干掉（隐藏）注册密码二次确认文本框。实际输错密码的情况极少，万一输错了还有密保邮箱不是，所以个人觉得可以省略哈
效果如图：

用JS隐藏掉确认框并同步密码输入即可，顺便加了个显示密码的切换按钮，不方向输入是否正确时可以点击显示，人性化设计有木有
DEMO：https://cn.admxn.com/member.php?mod=register

食用方法：
将下方JS代码拷贝到你当前模板的注册页面模板文件register.htm底部即可，默认路径是\template\default\member\register.htm

<script>
// 查找所有type为password的input元素
const passwordInputs = document.querySelectorAll('input[type="password"]');

// 找到第二个密码框所在的div并将其隐藏
let parentDiv = passwordInputs[1].parentNode;
while (parentDiv.tagName !== 'DIV') {
   parentDiv = parentDiv.parentNode;
}
parentDiv.style.display = 'none';

// 监听第一个密码框的输入事件
passwordInputs[0].addEventListener('input', function() {
   // 将第一个密码框的值同步到第二个密码框
   passwordInputs[1].value = passwordInputs[0].value;
});

// 显示密码
const buttonHtml = '<span id="showPasswordButton" class="fas fa-eye"></span>';
passwordInputs[0].insertAdjacentHTML('afterend', buttonHtml);

const showPasswordButton = document.getElementById('showPasswordButton');

let isPasswordVisible = false;

showPasswordButton.addEventListener('click', function() {
   isPasswordVisible = !isPasswordVisible;

   if (isPasswordVisible) {
      // 切换为文本类型，密码可见
      passwordInputs[0].type = 'text';
      showPasswordButton.classList.remove('fa-eye');
      showPasswordButton.classList.add('fa-eye-slash');
   } else {
      // 切换回密码类型，密码隐藏
      passwordInputs[0].type = 'password';
      showPasswordButton.classList.remove('fa-eye-slash');
      showPasswordButton.classList.add('fa-eye');
   }
});
</script>

密码, passwordInputs, 显示, 注册, 隐藏

9527 · 發表於 2023-12-8 09:15:04

海哥 · 發表於 2023-12-8 13:21:50

回帖留名

ysx24 · 發表於 2023-12-10 11:46:30

好东西，不错

文強 · 發表於 2023-12-10 12:18:52

这个的确不错

9527 · 發表於 2023-12-12 17:15:51

// 选择器改为查找id为registerform内的所有type为password的input元素，这样更严谨，不然默认模板会选中头部的登录框
const passwordInputs = document.querySelectorAll('#registerform input[type="password"]');

E.Kun · 發表於 2023-12-28 19:08:25

这个好~！

s77 · 發表於 2023-12-31 01:50:38

学习一下

小巅峰 · 發表於 2024-7-8 22:56:06

666666666666666666666

小巅峰 · 發表於 2024-7-11 12:31:34

66666666666666

[教程] 不删代码干掉注册密码二次确认文本框

瀏覽過的版塊