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

9527

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

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

食用方法：
將下方JS代碼拷貝到你當(dāng)前模板的注冊(cè)頁(yè)面模板文件register.htm底部即可，默認(rèn)路徑是\template\default\member\register.htm

<script>
        // 查找所有type為password的input元素
        const passwordInputs = document.querySelectorAll('input[type="password"]');
       
        // 找到第二個(gè)密碼框所在的div并將其隱藏
        let parentDiv = passwordInputs[1].parentNode;
        while (parentDiv.tagName !== 'DIV') {
          parentDiv = parentDiv.parentNode;
        }
        parentDiv.style.display = 'none';
       
        // 監(jiān)聽(tīng)第一個(gè)密碼框的輸入事件
        passwordInputs[0].addEventListener('input', function() {
          // 將第一個(gè)密碼框的值同步到第二個(gè)密碼框
          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) {
            // 切換為文本類型，密碼可見(jiàn)
            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)容請(qǐng)回復(fù)

9527

海哥

回帖留名

ysx24

好東西，不錯(cuò)

文強(qiáng)

這個(gè)的確不錯(cuò)

9527

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

E.Kun

這個(gè)好~！

s77

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

小巔峰

666666666666666666666

小巔峰

66666666666666