반응형
오늘은 비밀번호 암호화 css 만들기를 진행해보도록 하겠습니다.
업무상 비밀번호 암호화를 구현하는 부분을 진행했어야 했는데 자바스크립트와 css를 이용해서 간단하게 구현해보았습니다.
결과는 다음과 같습니다.
원리는 keyup 이벤트가 발생했을 때 is-active 클래스가 생성되면서 opacity 값을 변하게 하는 것이라고 생각하면 됩니다.
html
<div class="lessor_deposit_frame">
<span class="lessor_deposit_num">
<span class="lessor_deposit_circle"></span>
<span class="lessor_deposit_circle"></span>
<span class="lessor_deposit_circle"></span>
<span class="lessor_deposit_circle"></span>
<span class="lessor_deposit_circle"></span>
<span class="lessor_deposit_circle"></span>
<span class="lessor_deposit_circle"></span>
</span>
<input type="tel" id="joinId" maxlength="7" class="lessor_deposit_text" placeholder="뒤 7자리" onkeyup="changeDepositText(this.value);" onfocus="focusDepositText(this.value);" onblur="focusDeleteDepositText(this.value);">
</div>
scss
.lessor_deposit_num{
display: none;
position: absolute;
top: 0;
left: 80px;
padding: 9px 0 0 3px;
white-space: nowrap;
&.is-active{
display:flex;
}
.lessor_deposit_circle{
display: inline-block;
width: 8px;
height: 8px;
margin-right: 4px;
border-radius: 50%;
background-color: #333;
opacity: 0.2;
vertical-align: top;
&.is-active{
opacity: 1;
}
}
}
js
// change 이벤트 생성시 발생하는 함수
function changeDepositText(val){
// 주민번호 뒤 7자리
const BACK_PERSON_NUMBER = 7;
const passwordList = document.querySelectorAll('.lessor_deposit_circle');
const depositFrame = document.querySelector('.lessor_deposit');
const depositNum = document.querySelector('.lessor_deposit_num');
const depositFrameText = document.querySelector('.lessor_deposit_text');
depositFrameText.setAttribute("value", event.target.value);
for(let index = 0; index<event.target.value.length; index++){
passwordList[index].classList.add('is-active');
}
for(let index = event.target.value.length; index<BACK_PERSON_NUMBER; index++){
passwordList[index].classList.remove('is-active');
}
}
// focus in 이벤트 생성 시 발생하는 함수
function focusDepositText(val) {
const depositFrame = document.querySelector('.lessor_deposit');
const depositNum = document.querySelector('.lessor_deposit_num');
depositFrame.classList.add('is-active');
depositNum.classList.add('is-active');
}
// focus 해제할 때 발생하는 이벤트
function focusDeleteDepositText(val){
const depositFrame = document.querySelector('.lessor_deposit');
const depositNum = document.querySelector('.lessor_deposit_num');
const depositFrameText = document.querySelector('.lessor_deposit_text');
if(event.target.value.length===0){
depositFrame.classList.remove('is-active');
depositNum.classList.remove('is-active');
}else{
depositFrame.classList.remove('is-active');
}
}
반응형
'css' 카테고리의 다른 글
css - flexbox(flex, flex-grow, flex-shrink, flex-basis) (0) | 2021.07.10 |
---|---|
css 스타일 구체성(명시도) - id, class, 기본요소, !important (0) | 2021.07.05 |
highlight 효과 만들기 - css (0) | 2021.06.21 |