input에 비밀번호 확인 버튼 추가하기 > 그누보드5 팁자료실

그누보드5 팁자료실

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>

<!--}비밀번호 보기 구현 끝-->

 

https://dsclub.kr/code/669

추천
6

댓글 3개

전체 2,428 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT