查看: 304|回复: 5

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

[复制链接]

161

主题

364

回帖

620

积分

高级会员

积分
620
发表于 2023-12-12 20:08:58 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

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

免责声明

1.本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。
2.如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。

上一篇:支付宝代开发票教程,解决个人开发者无法给客户开具发票的难题
下一篇:帖子里有多个MP4附件,实现播放一个其他都停,的最最最简易方法 New

回复

使用道具 举报

170

主题

381

回帖

666

积分

高级会员

积分
666
发表于 2023-12-12 20:09:39 | 显示全部楼层
d1.jpg d2.jpg
回复 支持 反对

使用道具 举报

128

主题

370

回帖

595

积分

高级会员

积分
595
发表于 2023-12-12 20:10:22 | 显示全部楼层
回帖留名
回复 支持 反对

使用道具 举报

159

主题

389

回帖

665

积分

高级会员

积分
665
发表于 2023-12-12 20:10:52 | 显示全部楼层
好东西,不错
回复 支持 反对

使用道具 举报

161

主题

364

回帖

620

积分

高级会员

积分
620
楼主 发表于 2023-12-12 20:11:08 | 显示全部楼层
这个的确不错
回复 支持 反对

使用道具 举报

145

主题

351

回帖

612

积分

高级会员

积分
612
发表于 2023-12-12 20:11:27 | 显示全部楼层
// 选择器改为查找id为registerform内的所有type为password的input元素,这样更严谨,不然默认模板会选中头部的登录框
const passwordInputs = document.querySelectorAll('#registerform input[type="password"]');
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表