طريقة إظهار وإخفاء ال Password في حقول الإدخال

شرح طريقة إخفاء وإظهار كلمة المرور داخل ال Form والتي يستخدمها الناس دائما في تصميماتهم
طريقة إخفاء وإظهار كلمة المرور الموجدة داخل حقل الإدخال بسيطة وسهلة جدا وفكرة عملها هي تحويل نوع الحقل من “Password” إلى “Text” حتى تتحول النجوم للحروف العادية والعكس ونبدأ بعمل البنية الخاصة بحقول الإدخال والزر الذي سوف يقوم بتحويل نوع حقل الإدخال كالتالي.
بعد عمل البنية نقوم بكتابة كود Javascript لتخزين العناصر التي سوف نستخدمها في متغيرات كما يلي
بعد أن قمنا بالتخزين تبقى علينا عمل ال Event بحيث نضغط على الزر يتغير Attribute ال Password إلى Text والعكس. وهي onclick كالتالي
هنا وضعنا e وهي ترمز ل Event ومررناها داخل ال Function ولمنع السلوك الإفتراضي ( Default Behaviour ) للعنصر وهو إرسال البيانات من داخل النموذج قمنا بإستخدام
الآن بقى أن نقوم بعمل فحص لحقل الإدخال وتغيير ال Attribute الخاص به بناء على النتيجة.
  • كلمة this هنا تعود على الزر الذي ضغطنا عليه.
  • نقوم بفحص النص داخل الزر عن طريق textContent لنعرف هل محتواه هو جملة Show Password أم لا.
  • في حالة أن الجملة هي Show Password نقوم بتغييرها ل Hide Password ثم نقوم بتعديل نوع ال Attribute إلى Text عن طريق setAttribute
  • وهكذا عندما ينعكس الموضوع وتجد الكلمة ليست Show Password نقوم بعكس كل ما فعلناه ونقوم بتغيير النص الموجود داخل الزر وأيضا ال Attribute
وهنا الكود الكامل للدرس
ولتجربة الكود كاملا هنا