비밀번호 보기/숨기기 기능구현
최근엔 비밀번호 정책이 엄격해져서, 비밀번호 최소길이는 보통 8자가 기본이고 대문자를 섞으라거나 특수문자를 섞으라는 요구를 하는 곳이 많다.
모바일에서 특히 이런 복잡한 비밀번호를 입력하다보면 나도 모르게 비밀번호가 틀리는 경우가 많고, 어떤 과정을 진행중 비밀번호가 틀렸는데 과정이 초기화되고 리다이렉트 되버리는 상황을 겪는 경우도 있다.
그래서 눈 모양으로 비밀번호 입력창 옆에 자리한 아이콘을 누르면, 내가 지금까지 입력한 비밀번호가 보였다가 다시 *로 바꾸는 기능이 존재하는 곳들이 있으면 반갑기도 하다. IE 11에서는 기본적으로 브라우저에 내장된 기능이기도 하다.
(추가) 최근 구글 로그인에 이 기능이 생겼다!
생각보다 구현은 매우 간단하다. 따라할 것도 없이 예제만 보면 된다.
HTML
비밀번호를 입력받는 password type의 <input>태그와, 눈모양 아이콘을 위한 <i>태그. 해당 아이콘은 폰트어썸에서 가져왔다.
<div class="main"> <input type="password" placeholder="비밀번호를 입력하세요"> <i class="fa fa-eye fa-lg"></i> </div> | cs |
Font Awesome
<head>태그 내 아래 코드를 입력해야 아이콘을 가져다 쓸 수 있다.
<link rel="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> | cs |
CSS
<input>태그와 눈모양아이콘을 적절히 배치한다.
div.main{ position: relative; padding: 20px; } div.main input{ width: 300px; height: 30px; background-color: black; border: 0; color: white; text-indent: 10px; } div.main i{ position: absolute; left: 75%; top: 27px; color: orange; } | cs |
Javascript(jQuery)
구체적인 과정은 아래와 같다.
- 눈모양 아이콘 <i>태그에 onclick 이벤트리스너를 달고, 클릭 시 <input>태그에 active 클래스를 토글한다.
- 비밀번호를 입력하는 <input>가 active 클래스를 가지고 있으면
- font awesome의 fa-eye 아이콘을 fa-eye-slash로 변경하여 눈모양에 슬래시가 추가된 아이콘으로 변경하여 시각적 변화를 준 뒤
- <input>의 type을 password가 아닌 일반 text로 변경하면 비밀번호가 그냥 노출된다.
활성화된 눈알을 다시 클릭하면 토글로 인해 active 클래스가 사라지므로 다시 처음과 같이 원상복구 시킨다.
$(document).ready(function(){ $('.main 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'); } }); }); | cs |
output
간단하게 비밀번호 보이기/숨기기 기능을 구현했다.
