不刪代碼干掉注冊密碼二次確認(rèn)文本框

9527

簡化下注冊項目，干掉（隱藏）注冊密碼二次確認(rèn)文本框。實際輸錯密碼的情況極少，萬一輸錯了還有密保郵箱不是，所以個人覺得可以省略哈
效果如圖：

登錄/注冊后可看大圖

用JS隱藏掉確認(rèn)框并同步密碼輸入即可，順便加了個顯示密碼的切換按鈕，不方向輸入是否正確時可以點擊顯示，人性化設(shè)計有木有
DEMO：https://cn.admxn.com/member.php?mod=register

食用方法：
將下方JS代碼拷貝到你當(dāng)前模板的注冊頁面模板文件register.htm底部即可，默認(rèn)路徑是\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';
       
        // 監(jiān)聽第一個密碼框的輸入事件
        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>

游客，如果您要查看本帖隱藏內(nèi)容請回復(fù)

9527

登錄/注冊后可看大圖

登錄/注冊后可看大圖

海哥

回帖留名

ysx24

好東西，不錯

文強

這個的確不錯

9527

// 選擇器改為查找id為registerform內(nèi)的所有type為password的input元素，這樣更嚴(yán)謹(jǐn)，不然默認(rèn)模板會選中頭部的登錄框
const passwordInputs = document.querySelectorAll('#registerform input[type="password"]');

E.Kun

這個好~！

s77

學(xué)習(xí)一下

小巔峰

666666666666666666666

小巔峰

66666666666666