Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Chức Năng Ẩn Và Hiển Thị Mật Khẩu Bằng HTML Javascript

Cách Tạo Chức Năng Ẩn Và Hiển Thị Mật Khẩu Bằng HTML Javascript


Ngày 7 Tháng 7 Năm 2021

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo chức năng ẩn và hiển thị mật khẩu trong quá trình phát triển form bằng HTML, CSS và Javascript nhé!

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Hiển Thị Và Ẩn Mật Khẩu</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  </head>
  <body>
    <div class="container">
      <input type="password" placeholder="Nhập Mật Khẩu" required>
      <span class="show-btn"><i class="fas fa-eye"></i></span>
    </div>
  </body>
</html>

CSS

Bây giờ chúng ta sẽ trang trí cho form input password cho website nhé!

@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
 background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}
.container{
  position: relative;
  height: 55px;
  width: 320px;
  border-radius: 5px;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
}
.container input{
  width: 100%;
  height: 100%;
  border: 1px solid #8e44ad;
  padding-left: 15px;
  font-size: 18px;
  outline: none;
  border-radius: 5px;
}
.container input::placeholder{
  font-size: 17px;
}
.container span{
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #8e44ad;
  cursor: pointer;
  display: none;
}
.container input:valid ~ span{
  display: block;
}
.container span i.hide-btn::before{
  content: "f070";
}

Javascript

Bây giờ chúng ta sẽ đi vào tạo chức năng hiển thị và ẩn mật khẩu dành cho input element trong website nhé!

    const passField = document.querySelector("input");
      const showBtn = document.querySelector("span i");
      showBtn.onclick = (()=>{
        if(passField.type === "password"){
          passField.type = "text";
          showBtn.classList.add("hide-btn");
        }else{
          passField.type = "password";
          showBtn.classList.remove("hide-btn");
        }
      });

Và đây là hình ảnh kết quả của chúng ta nhé!

Còn dưới đây là dự án trên Codepen nhé!

See the Pen Ẩn Và Hiển Thị Mật Khẩu by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn cách tạo chức năng Ẩn và hiển thị mật khẩu cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!