返回列表 发帖
查看: 2615|回复: 9

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

9

主题

111

回帖

196

积分

应用开发者

贡献
8 点
金币
18 个
QQ
发表于 2023-12-7 11:51:50 | 显示全部楼层 |阅读模式


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

游客,如果您要查看本帖隐藏内容请回复


回复

使用道具 举报

9

主题

111

回帖

196

积分

应用开发者

贡献
8 点
金币
18 个
QQ
 楼主| 发表于 2023-12-8 09:15:04 | 显示全部楼层
微信图片_20231208091129.jpg 微信图片_20231208091438.jpg
回复 支持 反对

使用道具 举报

48

主题

355

回帖

443

积分

炉火纯青

贡献
4 点
金币
1 个
QQ
发表于 2023-12-8 13:21:50 来自手机 | 显示全部楼层
回帖留名
回复

使用道具 举报

288

主题

1195

回帖

1596

积分

已臻大成

贡献
4 点
金币
0 个
发表于 2023-12-10 11:46:30 来自手机 | 显示全部楼层
好东西,不错
回复 支持 反对

使用道具 举报

2

主题

627

回帖

1529

积分

已臻大成

贡献
115 点
金币
80 个
发表于 2023-12-10 12:18:52 | 显示全部楼层
这个的确不错
回复 支持 反对

使用道具 举报

9

主题

111

回帖

196

积分

应用开发者

贡献
8 点
金币
18 个
QQ
 楼主| 发表于 2023-12-12 17:15:51 | 显示全部楼层
// 选择器改为查找id为registerform内的所有type为password的input元素,这样更严谨,不然默认模板会选中头部的登录框
const passwordInputs = document.querySelectorAll('#registerform input[type="password"]');
回复 支持 反对

使用道具 举报

0

主题

5

回帖

6

积分

初学乍练

贡献
0 点
金币
0 个
发表于 2023-12-28 19:08:25 | 显示全部楼层
这个好~!
回复

使用道具 举报

s77

6

主题

75

回帖

119

积分

渐入佳境

贡献
0 点
金币
19 个
发表于 2023-12-31 01:50:38 | 显示全部楼层
学习一下
回复

使用道具 举报

4

主题

70

回帖

89

积分

渐入佳境

贡献
2 点
金币
4 个
发表于 2024-7-8 22:56:06 | 显示全部楼层
666666666666666666666
回复 支持 反对

使用道具 举报

4

主题

70

回帖

89

积分

渐入佳境

贡献
2 点
金币
4 个
发表于 2024-7-11 12:31:34 | 显示全部楼层
66666666666666
回复 支持 反对

使用道具 举报

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

本版积分规则

  • 关注公众号
  • 有偿服务微信
  • 有偿服务QQ

手机版|小黑屋|Discuz! 官方交流社区 ( 皖ICP备16010102号 |皖公网安备34010302002376号 )|网站地图|star

GMT+8, 2024-7-19 22:41 , Processed in 0.197047 second(s), 8 queries , Redis On.

Powered by Discuz! W1.0 Licensed

Cpoyright © 2001-2024 Discuz! Team.

关灯 在本版发帖
有偿服务QQ
有偿服务微信
返回顶部
快速回复 返回顶部 返回列表