هیچ محصولی در سبد خرید نیست.
مدرس دوره
نبی عبدی
زمان ویدیو
23:04 دقیقه
برو به دیگر جلسات
برای دانلود ویدیو
نمایش و پنهان کردن رمز عبور در جاوا اسکریپت
در این آموزش ویدیویی از سری آموزش‌های مینی پروژه جاوا اسکریپت و مینی پروژه های 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');
}
});جمع بندی
در انتها امیدواریم که آموزش نحوه نمایش و پنهان کردن رمز عبور در فیلد پسورد در جاوا اسکریپت را یاد گرفته باشید، اگر سوالی در رابطه با این آموزش دارید در انتهای همین جلسه و در بخش کامنت ها با ما در ارتباط باشید.
سلام وقت بخیر من می خواهم یک پسورد درست کنم لطفا اگر می شود دکمه قرار دادن، و درست بودن یا نبودن رمز را هم اگر می شود توضیح دهید
درود، بله سعی می‌کنیم در یک آموزش مجزا نحوه اعتبار سنجی رمز عبور را نیز آموزش دهیم.