可可的可 发表于 2024-9-4 01:02:03

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

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

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

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


      // 查找所有type为password的input元素
      const passwordInputs = document.querySelectorAll('input');
      
      // 找到第二个密码框所在的div并将其隐藏
      let parentDiv = passwordInputs.parentNode;
      while (parentDiv.tagName !== 'DIV') {
          parentDiv = parentDiv.parentNode;
      }
      parentDiv.style.display = 'none';
      
      // 监听第一个密码框的输入事件
      passwordInputs.addEventListener('input', function() {
          // 将第一个密码框的值同步到第二个密码框
          passwordInputs.value = passwordInputs.value;
      });
      
      // 显示密码
      const buttonHtml = '';
      passwordInputs.insertAdjacentHTML('afterend', buttonHtml);

      const showPasswordButton = document.getElementById('showPasswordButton');
      
      let isPasswordVisible = false;
      
      showPasswordButton.addEventListener('click', function() {
          isPasswordVisible = !isPasswordVisible;
      
          if (isPasswordVisible) {
            // 切换为文本类型,密码可见
            passwordInputs.type = 'text';
                  showPasswordButton.classList.remove('fa-eye');
                  showPasswordButton.classList.add('fa-eye-slash');
          } else {
            // 切换回密码类型,密码隐藏
            passwordInputs.type = 'password';
                  showPasswordButton.classList.remove('fa-eye-slash');
                  showPasswordButton.classList.add('fa-eye');
          }
      });

站帮网 发表于 2024-9-4 01:02:17

霸王别姬 发表于 2024-9-4 01:02:33

回帖留名

ysx24 发表于 2024-9-4 01:03:13

好东西,不错

知行社区 发表于 2024-9-4 01:03:23

这个的确不错

ysx24 发表于 2024-9-4 01:03:32

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

余赚网 发表于 2024-9-4 01:04:24

这个好~!

可可的可 发表于 2024-9-4 01:04:41

学习一下

余赚网 发表于 2024-9-4 01:05:23

666666666666666666666

余赚网 发表于 2024-9-4 01:05:51

66666666666666
页: [1]
查看完整版本: 不删代码干掉注册密码二次确认文本框