FrontEnd/JavaScript
[JavaScript] 비밀번호 보이기 / 숨기기 구현
DevNoah
2022. 6. 15. 16:36
오늘은 새로운 프로젝트의 웹 페이지를 제작하기 시작하며, 새롭게 로그인 폼을 만들고자 하였다.
이번에는 저번에 사용하지 않았던 기능인 비밀번호 보이기/숨기기를 개발하여 사용해보고자 생각하였다.
로그인 개발 시, 비밀번호 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으로 불러오거나 사용할 수 있도록 가져 와야한다.