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

كتب في 13 نوفمبر 2018 | المشاهدات 824
طريقة إخفاء وإظهار كلمة المرور المووجدة داخل حقل الإدخال بسيطة وسهلة جدا وفكرة عملها هي تحويل نوع الحقل من “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
وهنا الكود الكامل للدرس ولتجربة الكود كاملا هنا


الكلمات الدلالية:

الإعلانات


User Avatar

Osama Mohamed ( )

مدرب لغات برمجة ومدون تقني ومؤسس قناة الزيرو ويب سكول أقوم بتبسيط كل ما هو معقد بفضل من الله


0 تعليقات


    أضف تعليقك