비밀번호 암호화 만들기(css, javascript)

오늘은 비밀번호 암호화 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');
    }
}