بعض المواقع وتطبيقات الهواتف المحمولة تعطينا إمكانية إظهار كلمة السر في الحقل الخاص بها للتأكد من أننا أدخلنا كلمة السر الصحيحة. في هذا المقال سنتعلم معا طريقة إظافة هذه الخاصية إلى استماراتنا Forms بكل بساطة، فالقليل من كود الجافاسكريبت سيفي بالغرض كما سنرى.

إضافة مكتبة الجيكويري

سنضيف مكتبة الجيكويري لأنها تسهل علينا التنقل بين عناصر الصفحة، لست مجبرا على إضافتها فيمكنك القيام بنفس المهمة باستعمال الجافاسكريبت الخام، ولكن الكود سيكون أطول). على كل حال فمكتبة جيكويري لم تعد محل جدال الآن فالعديد من منصات التدوين وجل المواقع تعمل بها وتستفيد من مزاياها.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
1

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>



إضافة ملف bootstrap.min.css

صراحة هنا أضفنا ملف بوتستراب فقط لجلب أيقونة العين التي تظهر على يمين حقل كلمة المرور، وبالتالي يمكنك إضافة أي مكتبة أخرى تعمل بها أو فقط تعوض الأيقونة بكلمتي “إظهار” و”إخفاء”، هذا يعتمد على حاجيات وميول كل واحد منا.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
1

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">



شيفرة HTML

<div class="field"> <input type="password" name="password" id="password"> <i class="glyphicon glyphicon-eye-open"></i> </div>
1
2
3
4

<div class="field">
<input type="password" name="password" id="password">
<i class="glyphicon glyphicon-eye-open"></i>
</div>



هنا أضفنا عنصر عبارة عن <div> وبداخله حقل كلمة السر وبجانبه الأيقونة (العين).
إضافة الستايل

.field{ width: 300px; position: relative; margin: 20px; } .field input{ width: 100%; line-height: 40px; text-indent: 10px; } .field .glyphicon{ position: absolute; right: 10px; top: 11px; font-size: 20px; color: #1c90f3; cursor: pointer; } .field .glyphicon.active{ color: #ccc; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.field{
width: 300px;
position: relative;
margin: 20px;
}
.field input{
width: 100%;
line-height: 40px;
text-indent: 10px;
}
.field .glyphicon{
position: absolute;
right: 10px;
top: 11px;
font-size: 20px;
color: #1c90f3;
cursor: pointer;
}
.field .glyphicon.active{
color: #ccc;
}



هنا فقط أضفنا بعض الستايل Style لتحسين مظهر الحقل، لا أقل ولا أكثر.إظهار وإخفاء كلمة السر

$('.field .glyphicon').on('click', function(){ var attr = ($(this).prev().attr('type') == 'password') ? 'text' : 'password'; $(this).prev().attr('type', attr); $(this).toggleClass('active'); });
1
2
3
4
5

$('.field .glyphicon').on('click', function(){
var attr = ($(this).prev().attr('type') == 'password') ? 'text' : 'password';
$(this).prev().attr('type', attr);
$(this).toggleClass('active');
});



الآن نأتي إلى المرحلة الأهم، وهي كتابة كود الجافاسكريبت لإظهار وإخفاء كلمة السر.

1. أولا: ننتظر القيام بالنقر على أيقونة العين.
2. ثانيا: ننشئ متغير اسمه attr، إذا كانت كلمة السر ظاهرة نعطيه قيمة password وإذا كانت كلمة السر على وضعها الطبيعي أي مخفية نعطيه القيمة text من أجل إظهارها.
3. ثالثا : نقوم بإضافة وإزالة الكلاس active لأيقونة العين فقط من أجل تغيير لونها من الأزرق إلى الرمادي أو العكس.