input에 비밀번호 확인 버튼 추가하기 정보
input에 비밀번호 확인 버튼 추가하기
관련링크
본문
우선, 비밀번호 보기 기능을 적용할 <input>을 <div class="password-container"></div>로 감싸 주세요.
그다음 </div>위 <input> 아래에 <i class="fa fa-lock" id="togglePassword"></i>를 추가해주세요.
*(완성된 모습, 기본 예시)
<div class="password-container">
<input type="password" required maxlength="20" placeholder="비밀번호">
<i class="fa fa-lock" id="togglePassword"></i>
</div>
그다음 아래의 코드를 페이지 원하는 곳에 아래의 코드를 입력해주세요.
<!--입력한 비밀번호 볼 수 있도록 구현{-->
<style>
.password-container {
position: relative;
}
#ol_pw {
width: 100%;
padding-right: 30px;
}
#togglePassword {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
</style>
<script>
// JavaScript
const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#ol_pw');
togglePassword.addEventListener('click', function () {
const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
password.setAttribute('type', type);
if (type === 'text') {
togglePassword.classList.remove('fa-lock');
togglePassword.classList.add('fa-unlock-alt');
} else {
togglePassword.classList.remove('fa-unlock-alt');
togglePassword.classList.add('fa-lock');
}
});
</script>
<!--}비밀번호 보기 구현 끝-->
6
댓글 3개
감사합니다
감사합니다. ^^
좋은 정보 감사합니다.