12강 - 패스워드 숨김, 보임 모드 변경

로그인시 비밀번호 유출 방지를 위해 비밀번호 숨김/보임 모드가 있는데
이를 코드로 하면 이렇다.

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="box_1">
    <input type="password">
    <span class="mode">
<!--         password mode -->
        <span>P</span> 
<!--         text mode -->
        <span>T</span>
    </span>
</div>

.box_1 {
    display: inline-block;
    border: 1px solid red;
    position : relative;   
}
.box_1 > .mode {
    position : absolute;
    right: 0;
    cursor : pointer;
    border: 1px solid blue;
}
.box_1 > .mode > span:last-child {
    display: none;
}
/* .box도 있고 .text도 있는 mode */
.box_1.text > .mode > span:last-child {
    display: block;
}
.box_1.text > .mode > span:first-child {
    display: none;
}

$('.box_1 > .mode').click(function(){
    let $box1 = $(this).parent();
    let $input = $(this).prev();
    
    if($box1.hasClass('text')) {
        $box1.removeClass('text');
        $input.attr('type', 'password');
    }
    else {
        $box1.addClass('text');
        $input.attr('type', 'text');
    }
});

• attr : attribute의 줄임말 ,
• prev :css에서는 형을 불러오지 못하지만, js에서는 형을 불러올 수 있음.
• this.prev this (mode)의 prev(형) = input 을 말한다.

• 코드펜으로 정리된 코드 한번에 보러가기