نمایش و پنهان کردن رمز عبور در جاوا اسکریپت

منتشر شده در تاریخ : 1 مرداد 1401

در این آموزش ویدیویی از سری آموزش‌های مینی پروژه جاوا اسکریپت و مینی پروژه های HTML و CSS می خواهیم یک فیلد پسورد طراحی کنیم که قابلیت نمایش و پنهان کردن رمز عبور را داشته باشد، در این پروژه از html و css و جاوا اسکریپت استفاده خواهیم کرد و البته از فونت آیکون فونت آسوم هم استفاده خواهیم کرد، پس با این آموزش جذاب همراه وبکیما باشید.

راهنمای مطالعه:

قابلیت نمایش و پنهان کردن رمز در فیلد پسورد

معمولا اگر وب سایت های خیلی معروف را دیده باشید، این سایت ها چون از برنامه نویس های حرفه‌ای در طراحی سایت خود استفاده می‌کنند، معمولا یک سری امکانات دارند که سایت های معمولی ندارند، یکی از این امکانات باحال همین قابلیت نمایش و پنهان کردن رمز در فیلد پسورد است که در این ویدیوی آموزشی قرار است که این مورد را به صورت پروژه محور یاد بگیرید.

کدهای HTML پروژه

در زیر می‌توانید کدهای html مربوط به پروژه قابلیت نمایش و پنهان کردن رمز در فیلد پسورد را مشاهده کنید.

<!DOCTYPE html>
<!-- Created By Navid Dev -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navid Dev - Password Show-Hide Button</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="content">
      <div class="lock">
        <div class="fa fa-lock"></div>
      </div>
      <input type="password" placeholder="Enter Password" required />
      <span class="show-hide">
        <i class="fa fa-eye"></i>
      </span>
    </div>
    <script src="app.js"></script>
  </body>
</html>

کدهای CSS پروژه

در زیر می‌توانید کدهای CSS مربوط به پروژه قابلیت نمایش و پنهان کردن رمز در فیلد پسورد را مشاهده کنید.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background: #d8efff;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.content {
  height: 50px;
  width: 280px;
  display: flex;
  position: relative;
  transition: transform 0.3s ease-in-out;
  overflow: hidden;
}
.lock {
  position: absolute;
  height: 50px;
  width: 50px;
  background: #48b3fb;
  color: #fff;
  line-height: 48px;
  font-size: 20px;
  border-radius: 3px 0 0 3px;
  border: 1px solid #48b3fb;
}
input {
  background: #f9fdff;
  height: 100%;
  width: 100%;
  border-radius: 3px;
  border: 1px solid #48b3fb;
  padding-left: 60px;
  outline: none;
  color: #48b3fb;
  font-family: 'Poppins', sans-serif;
  transition: all 0.2s ease;
}
input:focus {
  background: #fff;
  box-shadow: 0 0 0 4px #48b3fb69;
}
.show-hide {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
.show-hide i {
  font-size: 19px;
  color: #48b3fb;
  cursor: pointer;
  transform: translateX(200%);
  transition: transform 0.3s ease-in-out;
}
.show-hide i.hide::before {
  content: '\f070';
}
input:valid ~ .show-hide i {
  transform: translateX(0);
}
/* Responsive */
@media screen and (max-width: 768px) {
  .content {
    transform: scale(0.8);
  }
}

کدهای جاوا اسکریپت پروژه

در زیر می‌توانید کدهای جاوا اسکریپت مربوط به پروژه قابلیت نمایش و پنهان کردن رمز در فیلد پسورد را مشاهده کنید.

const passField = document.querySelector('input'),
  showBtn = document.querySelector('i');

showBtn.addEventListener('click', () => {
  if (passField.type === 'password') {
    passField.type = 'text';
    showBtn.classList.add('hide');
  } else {
    passField.type = 'password';
    showBtn.classList.remove('hide');
  }
});

جمع بندی

در انتها امیدواریم که آموزش نحوه نمایش و پنهان کردن رمز عبور در فیلد پسورد در جاوا اسکریپت را یاد گرفته باشید، اگر سوالی در رابطه با این آموزش دارید در انتهای همین جلسه و در بخش کامنت ها با ما در ارتباط باشید.

5/5 - (2 امتیاز)

نظرات در “نمایش و پنهان کردن رمز عبور در جاوا اسکریپت”

روزبه میگوید:
سلام وقت بخیر من می خواهم یک پسورد درست کنم لطفا اگر می شود دکمه قرار دادن، و درست بودن یا نبودن رمز را هم اگر می شود توضیح دهید

در
برای پاسخ دادن وارد شوید
- پشتیبانی میگوید:
  درود، بله سعی می‌کنیم در یک آموزش مجزا نحوه اعتبار سنجی رمز عبور را نیز آموزش دهیم.
  
  در
  برای پاسخ دادن وارد شوید

دیدگاهتان را بنویسید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.

آموزش طراحی فرم لاگین با HTML و CSS

اسلایدر کارت وبلاگ متحرک با HTML و CSS

آموزش ساخت ساعت دیجیتال در جاوا اسکریپت