طريقة تساعدك علي إظهار وإخفاء كلمة السر
بعض المواقع وتطبيقات الهواتف المحمولة تعطينا إمكانية إظهار كلمة السر في الحقل الخاص بها للتأكد من أننا أدخلنا كلمة السر الصحيحة. في هذا المقال سنتعلم معا طريقة إظافة هذه الخاصية إلى استماراتنا Forms بكل بساطة، فالقليل من كود الجافاسكريبت سيفي بالغرض كما سنرى.
http://www.tutomena.com/wp-content/u...e-password.png إضافة مكتبة الجيكويري سنضيف مكتبة الجيكويري لأنها تسهل علينا التنقل بين عناصر الصفحة، لست مجبرا على إضافتها فيمكنك القيام بنفس المهمة باستعمال الجافاسكريبت الخام، ولكن الكود سيكون أطول). على كل حال فمكتبة جيكويري لم تعد محل جدال الآن فالعديد من منصات التدوين وجل المواقع تعمل بها وتستفيد من مزاياها. <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'); }); الآن نأتي إلى المرحلة الأهم، وهي كتابة كود الجافاسكريبت لإظهار وإخفاء كلمة السر.
|
الساعة الآن 11:47 AM |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO ©2010, Crawlability, Inc. TranZ By
Almuhajir