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