안녕하세요 jju_developer입니다.
오늘도 안녕하십니까?
로그인 하실때 비밀번호 안보여서 답답하셨다구요?
아주 쉽고 간단하게 변경해드리겠습니다...!
이번 포스트에서는 비밀번호 입력란 옆에 눈 아이콘을 추가하여,
클릭 시 비밀번호를 표시하거나 숨기는 기능을 구현하는 방법을 단계별로 설명드리겠습니다.
이 예제는 JSP 페이지에서 jQuery를 사용하여 구현됩니다.
1. CSS 및 Font Awesome 아이콘 추가
먼저, Font Awesome 아이콘을 사용하여 눈 아이콘을 추가합니다. 그리고 아이콘의 위치를 조정하기 위해 CSS 스타일을 작성합니다.
<head>
<!-- 비밀번호 보기 css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- 비밀번호 눈표시 -->
<style>
.input-group.password {
position: relative;
}
.input-group.password .eyes {
position: absolute;
top: 0;
bottom: 0;
right: 10px;
margin: auto;
height: 30px;
font-size: 22px;
cursor: pointer;
display: flex;
align-items: center;
}
</style>
</head>
2. 비밀번호 입력 필드 및 눈 아이콘 추가
이제 HTML 부분에서 비밀번호 입력 필드와 눈 아이콘을 추가합니다.
input-group 클래스를 사용하여 비밀번호 입력 필드와 아이콘을 한 줄에 배치합니다.
<div class="input-group mb-4 password">
<input type="password" class="form-control login" placeholder="Password" id="passwd">
<div class="eyes">
<i class="fa fa-eye fa-lg"></i>
</div>
</div>
3. JavaScript로 비밀번호 표시/숨기기 기능 구현
다음으로, jQuery를 사용하여 눈 아이콘 클릭 시 비밀번호를 표시하거나 숨기는 기능을 구현합니다.
이 기능은 click 이벤트를 통해 동작하며, toggleClass 메서드를 사용하여 active 클래스를 토글합니다.
toggleClass('active')는 jQuery에서 제공하는 메서드로, 지정한 클래스(active)를 토글합니다.
즉, 해당 클래스가 요소에 없으면 추가하고, 있으면 제거합니다.
$(function(){
// 눈표시 클릭 시 패스워드 보이기
$('.eyes').on('click', function(){
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$(this).find('.fa-eye').attr('class', "fa fa-eye-slash fa-lg").parents('.input-group').find('#passwd').attr('type', "text");
} else {
$(this).find('.fa-eye-slash').attr('class', "fa fa-eye fa-lg").parents('.input-group').find('#passwd').attr('type', 'password');
}
});
});
JavaScript 동작 설명
$('.eyes').on('click', function(){ ... }): 눈 아이콘을 클릭했을 때 실행될 함수를 정의합니다.
$(this).toggleClass('active');: 클릭된 아이콘에 active 클래스를 토글합니다.
이 클래스가 없으면 추가하고, 있으면 제거합니다.
if ($(this).hasClass('active')) { ... } else { ... }:
active 클래스가 있는지 확인합니다.
$(this).find('.fa-eye').attr('class', "fa fa-eye-slash fa-lg"):
눈 아이콘을 눈 감은 아이콘으로 변경합니다.
parents('.input-group').find('#passwd').attr('type', "text"):
비밀번호 입력 필드의 타입을 text로 변경하여 비밀번호를 표시합니다.
$(this).find('.fa-eye-slash').attr('class', "fa fa-eye fa-lg"):
눈 감은 아이콘을 다시 눈 아이콘으로 변경합니다.
parents('.input-group').find('#passwd').attr('type', 'password'):
비밀번호 입력 필드의 타입을 password로 변경하여 비밀번호를 숨깁니다.
동영상으로 확인해보실까요~~~?
비가 많이 오네요~
감기 조심하시고 즐거운 코딩되세요!
'주니어 기초 코딩공부 > JSP 기초' 카테고리의 다른 글
| [JSTL] 변수 선언_property, scope, target, value, var 정리 및 예시 (42) | 2024.07.03 |
|---|---|
| [jsp] 회원 수정 삭제 2편 코드 완벽 정리 (0) | 2024.07.02 |
| [jsp] 회원 수정 삭제 등록 (0) | 2024.07.01 |
| [JSTL] 비교 연산할 때 소수점 없애기 formatNumber (0) | 2023.11.08 |
| JSP C태그_<c:out value="${값}"/> (0) | 2023.08.03 |