[js] JS - 입력한 패스워드 확인 (보이기/숨기기) 토글 버튼 넣기

패스워드 확인 (보이기/숨기기) 토글 버튼

 

<style>

.pwdbox {

    position: relative;

    display: inline-block;

}

.pwdbox input[type="password"],

.pwdbox input[type="text"] {

    padding-right: 30px; /* 이미지 배치용 공간 확보. */

}

.password-toggle {

   position: absolute;

    top: 50%;

    right: 5px; /* 오른쪽 여백 조절 */

    transform: translateY(-50%);

    cursor: pointer;

}

</style>

<div class="pwdbox">

    <label for="pwd">Password:</label>

    <input type="password" id="pwd" name="pwd">

    <img src="https://i.imgur.com/YrkG5xB.gif" alt="Toggle Password" class="password-toggle" id="togglePwd">

</div>

<script>

const pwdInput = document.getElementById('pwd');

const togglePwd = document.getElementById('togglePwd');

togglePwd.addEventListener('click', function () {

    if (pwdInput.type === 'password') {

        pwdInput.type = 'text';

        togglePwd.src = 'https://i.imgur.com/YrkG5xB.gif'; 

    } else {

        pwdInput.type = 'password';

        togglePwd.src = 'https://i.imgur.com/PQNhCln.gif'; 

   }

});

</script>

 

결과보기