[Dseok의 코딩스터디] 비밀번호 보이게하기, 숨기기 기능 구현

어느날, 갑자기 비밀번호 보이게하기, 숨기기 기능 구현 하는 방법이 궁금해졌다.

그래서 따로 심심해서 만들어보았다.

이걸로 나중에 이 기능을 구현할 일이 있으면 복사붙혀넣기하려고 한다.

순수자바스크립트로 구현하였다.

어려운 내장함수는 없으므로 바로 가져다 쓰면 좋을 듯 싶다.

<div class="wrap">
  <input type="password" class="toggleInput" />
  <button class="btn on">비밀번호 보기</button>
  <button class="btn2"> 비밀번호 숨기기</button>
</div>

.wrap{display:flex;aling-items:center;justify-content: center; gap:10px;padding-top:10%;}
.btn,.btn2{display:none;}
.on{display:block;}

 

아래는 정리 되지 않은 javascript 코드이다.

const inputType = document.querySelector(".toggleInput");
const inputBtn = document.querySelector(".btn");
const inputBtn2 = document.querySelector(".btn2");

inputBtn.addEventListener("click", () => {
  if(inputType.value == ''){
    alert("Please enter your password.");
    inputType.focus();
    return;
  };
  inputType.setAttribute("type", "text");
  inputBtn.classList.remove("on");
  inputBtn2.classList.add("on");
});
inputBtn2.addEventListener("click", () => {
  inputType.setAttribute("type", "password");
  inputBtn.classList.add("on");
  inputBtn2.classList.remove("on");
});

 

아래는 함수형으로 정리를 해보았다.

const inputType = document.querySelector(".toggleInput");
const inputBtn = document.querySelector(".btn");
const inputBtn2 = document.querySelector(".btn2");

function toggleVisibility(show) {
  if (show) {
    if (inputType.value === '') {
      alert("비밀번호를 입력하세요.");
      inputType.focus();
      return;
    }
    inputType.setAttribute("type", "text");
    inputBtn.classList.remove("on");
    inputBtn2.classList.add("on");
  } else {
    inputType.setAttribute("type", "password");
    inputBtn.classList.add("on");
    inputBtn2.classList.remove("on");
  }
}
inputBtn.addEventListener("click", () => toggleVisibility(true));
inputBtn2.addEventListener("click", () => toggleVisibility(false));

위 javascript는 둘 다 같은 기능을 한다.

다만 함수형인지 아닌지의 차이이다.

뭐가 됐던 보기 편할거 가져다 쓰자.