비밀번호 보이기/숨기기

[ i태그 사용 ]

1. head 안에 작성

 <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
  /> 

 

2. 사이트 들어가서 원하는 아이콘 소스 복붙하기 

https://fontawesome.com/

Font Awesome

 

3. html, css 

<style>
	div.pass_eye i {
		position: absolute;
		left:980px;
		top:210px;
		color:orange;
	}

</style>

<div class="field">
    <b>비밀번호</b> 
    <div class="pass_eye">
        <input type="password" name="pw" id="pw" class="input" placeholder="비밀번호">
        <a onclick="eye1()"><i class="fa-solid fa-eye fa-lg"></i></a>
    </div>
</div>

 

4. js

$(document).ready(function(){
    $('#pass_eye').on('click',function(){
        //$('#pw').toggleClass('active');
        
        if($('#pw').attr('class',"fa-solid fa-eye-slash fa-lg")){
            $(this).attr('class',"fa-solid fa-eye fa-lg").prev('#pw').attr('type',"text");
            $(this).css("position":"absolute","left":"980px","top":"210px","color":"orange")
        }else{
            $(this).attr('class',"fa-solid fa-eye-slash fa-lg").prev('#pw').attr('type','password');
        }
    });
});

 

[ input type="button" ]

1. html, css

<style>
	.input4 { /* 비밀번호 */
		/* border:1px solid red; */
		border:none;
		width:84%;
		padding:10px;
		border-right:1px solid #767676;
	}
	
	.pw_show {
		width:50px;
		/* border:1px solid blue; */
		border:none;
		padding:5px 0px;
		color:#f26b2b;
		font-size: 15px;
		font-weight: bolder;
		text-align: center;
		cursor:pointer;
		background-color: white;
	}
	
	.pw_check { /* 비밀번호 input, span 감싼 div */
		width:100%;
		border:1px solid #767676;
		border-radius:2px;
	}
</style>


<div class="field" >
    <div class="pw_check">
        <input type="password" name="pw" id="pw" class="input4" placeholder="비밀번호(필수)">
        <input type="button" id="pw_show" class="pw_show" value="show">
    </div>
</div>

 

2. js

$(document).ready(function() {
	$('#pw_show').on('click',function() {
		var pass = $('#pw');
		var type = pass.attr('type');
		
		if(type == 'password') {
			pass.attr('type','text');
			$(this).val('hide');
		} else {
			pass.attr('type','password');
			$(this).val('show');
		}
	});
});