본문 바로가기

개발

비밀번호 보기 / 숨기기 기능 구현

728x90

javascript

$(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');
        }
    });
});

 

html

<h1>비밀번호 보기/숨기기</h1>
<div class="main">
  <input type="password" placeholder="비밀번호를 입력하세요">
  <i class="fa fa-eye fa-lg"></i>
</div>

 

css

h1, div.main{
  width:350px;
  margin: 0 auto;
}
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;
}

 

출처

 

비밀번호 보기/숨기기 기능구현

비밀번호 보기/숨기기 기능구현 최근엔 비밀번호 정책이 엄격해져서, 비밀번호 최소길이는 보통 8자가 기본이고 대문자를 섞으라거나 특수문자를 섞으라는 요구를 하는 곳이 많다. 모바일에서

kutar37.tistory.com

728x90
반응형