로그인화면 비밀번호 보기 아이콘

안녕하세요.



로그인화면의 눈모양을 누르면 입력한 비밀번호를 보는 기능을 구현하려고 합니다.



어떻게 하면 되는지 고수님들의 조언을 부탁드립니다.

답변 2개

1768455713_qh2lzkDxmF.webp

1768455736_XsI1u4Mr8t.webp

Copy
<div style="position: relative; display: inline-block; width: 220px;">
    <input type="password" name="mb_password" id="reg_mb_password" required="" class="frm_input full_input required" minlength="3" maxlength="20" placeholder="비밀번호">
    <button type="button" id="togglePassword" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; padding: 5px;">
        <svg id="eyeIcon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
            <circle cx="12" cy="12" r="3"></circle>
        </svg>
    </button>
</div>

<script>
document.getElementById('togglePassword').addEventListener('click', function() {
    const passwordInput = document.getElementById('reg_mb_password');
    const eyeIcon = document.getElementById('eyeIcon');
    
    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        // 눈 아이콘을 "눈 가리기" 모양으로 변경
        eyeIcon.innerHTML = '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle><line x1="1" y1="1" x2="23" y2="23"></line>';
    } else {
        passwordInput.type = 'password';
        // 원래 눈 아이콘으로 변경
        eyeIcon.innerHTML = '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle>';
    }
});
</script>


 
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

비밀번호 input type이 password로 되어있는것을 눈모양 클릭 이벤트 이용하셔서

type을 text로 바꾸는 이벤트만 적용하시면 쉽게 적용 가능하실거에요!!^^

간단 예제입니다!

Copy
<!-- 비밀번호 -->
        <input type="password" name="mb_password" id="login_pw" class="form-control" required>
        <!-- 눈모양 -->
        <img id="toggle_eye" src="/img/눈모양.svg" alt="">
        <script>
            $('#toggle_eye').on('click', function () {
                let input_pass = $("#login_pw");
                if (input_pass.attr('type') == 'password') {
                    input_pass.attr('type', 'text');
                    $(this).attr('src', '/img/눈감김.svg');
                } else {
                    input_pass.attr('type', 'password');
                    $(this).attr('src', '/img/눈모양.svg');
                }
            });
        </script>
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고