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

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;
}

 

출처

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