[JavaScript] 비밀번호 보이기 / 숨기기 구현

오늘은 새로운 프로젝트의 웹 페이지를 제작하기 시작하며, 새롭게 로그인 폼을 만들고자 하였다.

이번에는 저번에 사용하지 않았던 기능인 비밀번호 보이기/숨기기를 개발하여 사용해보고자 생각하였다.

 

로그인 개발 시, 비밀번호 input type은 password로 지정하는데 그럼 비밀번호가 ****라고 표시되기 때문에 사용자는 자신이 입력한 값을 알 수 없다.

따라서 눈모양 아이콘을 클릭하면 토글 형식으로 비밀번호가 보였다, 안보였다 하는 기능을 개발하였다.

 

이때 필요한 코드는 비밀번호 입력 input box 와 눈모양 아이콘은 위한 i 태그를 한 번에 감싸주는 div를 선언하는 html이 필요하며, 아이콘을 input box 내의 적당한 위치에 배치하기 위한 css가 필요하다. 또한, 아이콘을 누르면 active 클래스를 추가하여 input type을 text로 바꿔 비밀번호를 표시하고 아이콘을 변경시키며, 한번 더 누르면 input type을 다시 password로 바꾸는 토글 형식의 기능을 가진 javascript가 필요하였다.

 

위의 요구사항대로 작성한 코드는 아래와 같다.

 

HTML

<div class="form-group password">
	<input type="password" class="form-control" placeholder="Password" required="">
	<i class="fa fa-eye fa-lg"></i>
</div>

 

CSS

div.password{
  position: relative;
}
div.password i{
  position: absolute;
  left: 90%;
  top: 35%;
  color: gray;
}

 

Javascript

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

 

해당 코드들을 통해 원하는 결과를 낼 수 있었다.

아, 참고로 아이콘은 font-awesome을 사용하였고 font-awesome 사용하기 위해서는 cdn으로 불러오거나 사용할 수 있도록 가져 와야한다.

 

참고 사이트 : https://kutar37.tistory.com/entry/%EB%B9%84%EB%B0%80%EB%B2%88%ED%98%B8-%EB%B3%B4%EA%B8%B0%EC%88%A8%EA%B8%B0%EA%B8%B0-%EA%B8%B0%EB%8A%A5%EA%B5%AC%ED%98%84