DEV Community

ktr92
ktr92

Posted on • Edited on

2

[html css js] Show/hide password input value

Codepen demo: https://codepen.io/ktr92/pen/vYVmbam

Solution example:

HTML

<div class="inputpassword" data-toggleblock="password">
  <input type="password">
  <img src="https://ktr92.github.io/nft/dist/img/Invisible.svg" alt="" data-togglebutton="password" class="password_invisible">
  <img src="https://ktr92.github.io/nft/dist/img/Eye2.svg" alt="" data-togglebutton="password" class="password_visible">
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

.inputpassword {
  position: relative;
  width: 320px;
}

.password_visible {
  display: none;
}

.inputpassword.active .password_invisible {
  display: none;
}

.inputpassword.active .password_visible {
  display: block;
}

.inputpassword img {
  position: absolute;
  right: 0;
  top: 50%;
  cursor: pointer;
  transform: translateY(-50%);
}

input {
  background: #f3f5f8;
  padding: 20px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border: none;
  border-bottom: 4px solid #d9dde3;
  display: block;
  width: 100%;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  resize: none;
  color: #212531;
}
Enter fullscreen mode Exit fullscreen mode

JS

document.querySelectorAll('[data-togglebutton="password"]').forEach((item) => {
  item.addEventListener("click", (event) => {
    let inp = item.closest("[data-toggleblock]").querySelector("input");
    if (inp.type === "password") {
      inp.type = "text";
      item.closest("[data-toggleblock]").classList.add("active");
    } else {
      inp.type = "password";
      item.closest("[data-toggleblock]").classList.remove("active");
    }
  });
});

Enter fullscreen mode Exit fullscreen mode

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay