[웹 개발-Jquery] 비밀번호 가시화 기능

 

비밀번호 입력창에서 자신이 올바르게 썻는지 확인해야 할 때가 있습니다.

 

하지만 그냥 type=password 라고 하자니 뭐라고 썻느지 안보이고 , type=text 라고 하자니 보안에 뭔가 신경이 쓰입니다.

 

그래서 눈 모양의 아이콘을 누르면 비밀번호가 시각화 되는 기능을 추가해보았습니다.

 

눈 모양 클릭 x

 

눈 모양 클릭 o

---

 

일단은 비밀번호 변경태그인 input 태그 옆에 i 태그를 추가해주었습니다.

 

 

[mypage.php 중 비밀번호 변경 부분]

<div style="position:absolute;bottom:0px; left:-25%; width:100%;height:65%" class="login-box">
	<form action="mypage_update_pass.php" method="POST">
	<p style="text-align:center; font-weight:bold; font-family:Inter" >비밀번호 변경</p>
	<p style="text-align:center"><input type="password" name ="ex_pass" placeholder = "이전 비밀번호 " maxlength='30' class="id-form" >&nbsp;<i class="fa fa-eye fa-lg"></i></p>
	<p style="text-align:center"><input type="password" name ="new_pass" placeholder = "새로운 비밀번호" maxlength='30' class="password-form">&nbsp;<i class="fa fa-eye fa-lg"></i></p>
	<p style="text-align:center"><input style="height:30px;width:50%" type = submit class="submit-btn" value="변경"></p>
	</form>
</div>

 

---

 

그 후 밑에 자바스크립트 코드를 추가해주었습니다.

 

[mypage.php 중 Jquery 부분]

<script>
      $(document).ready(function(){
            $('i.fa').on('click', function(){
                let $input = $(this).prev('input');
                if ($input.attr('type') === 'password') {
                    $(this).attr('class', "fa fa-eye-slash fa-lg");
                    $input.attr('type', "text");
                } else {
                    $(this).attr('class', "fa fa-eye fa-lg");
                    $input.attr('type', 'password');
                }
            });
        });
    </script>

 

< 코드해석>

 

1.우선 $(i.fa) 을 통해 특정 아이콘을 클릭하면 함수가 실행됩니다.

 

2. 이벤트가 발생한 태그($(this)) 이전태그중 input 태그를 변수 $input 에 넣어둡니다.

 

3. $input태그의 속성중 'type' 이 'password' 라면 이벤트가 발생한 태그인 $(this) 즉 i 태그 의 속성값 class 를 "fa fa-eye-slash-fa-lg" 로 변경합니다. 그리고 $input의 속성중 type 속성을 "text"로 바꿉니다.

이것이 비밀번호 가시화 과정이 됩니다.

 

4. 비밀번호 비가시화 과정 또한 같은방식으로 진행됩니다.

---

긴 글 읽어주셔서 감사합니다!