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

مثال لإمكانية إظهار وإخفاء كلمة السر

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

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

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

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

شيفرة HTML

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

إضافة الستايل

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

إظهار وإخفاء كلمة السر

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

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

خاتمة

كما رأينا الأمر بسيط جدا وليس معقدا فقط بعد المهارات في مكتبة جيكويري والمهمة باتت منجزة.
تجدون أسفله النتيجة النهائية للشرح الذي قمنا به :

ترك الرد

Please enter your comment!
Please enter your name here