비밀번호 보기 버튼 추가 (그누보드)
본문
input에 입력하는 텍스트의 보안이 필요한 경우 보통
[code]<input type="password">[/code]
를 사용합니다.
여기서 텍스트 입력수 제한을 할 때 required maxlength="최대 입력 가능 텍스트 수"를 이용하죠.
그누보드의 경우에는
[code]<input type="password" required maxlength="20">[/code]
이 되갰네요.
그리고 여기서 어떤 텍스트를 넣어야 할 지 알려주기 위해 placeholder="안내 문구"를 작성하고요.
최종적으로 (그누보드의 경우)아래와 같이 되게 됩니다.
[code]<input type="password" required maxlength="20" placeholder="비밀번호">[/code]
거기서 더 발전하여 요즘 대형 웹사이트에는 이러한 기본적인 보안이 적용된 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>
<!--}비밀번호 보기 구현 끝-->
좋아요24
이 글을 좋아요하셨습니다
2kat님의 댓글
🥰