Toggle

버튼 누르면 암호화

HTML

<h1>password toggle</h1>


  <div id="box">
    <input id="input" type="password">
    <button id="btn">Show</button>
  </div>

CSS

<style>
    #btn {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        background-color: transparent;
        border: none;
        padding: 0 0.5rem;
    }
    
    #box {
        position: relative;
        display: inline-block;
    }

    #input {
        padding: 0.5rem;
    }
  </style>

JS

 <script>
    const btn = document.getElementById("btn");
    const input = document.getElementById("input");

// 버튼에 클릭 이벤트
    btn.addEventListener("click", function () {

// 패스워드 입력 시 숫자 보이게
      if (input.type === "text") {
        input.type = "password"
        btn.textContent = "Show";
      } else {
      // 아니면 안 보이게
        input.type = "text"
        btn.textContent = "Hide";
      }
    })
  </script>