로그인화면 비밀번호 보기 아이콘
안녕하세요.
로그인화면의 눈모양을 누르면 입력한 비밀번호를 보는 기능을 구현하려고 합니다.
어떻게 하면 되는지 고수님들의 조언을 부탁드립니다.
로그인화면의 눈모양을 누르면 입력한 비밀번호를 보는 기능을 구현하려고 합니다.
어떻게 하면 되는지 고수님들의 조언을 부탁드립니다.
답변 2개
3주 전
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>
답변을 작성하려면 로그인이 필요합니다.