المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : [مهم] & [بسيط]: كشف حالة زر الكابس لوك caps lock بواسطة الجافاسكربت



admin
11-01-2013, بتوقيت غرينيتش 03:13 PM
http://www.dzbatna.com/images/icons/iconrote.gif [ظ…ظ‡ظ…] & [ط¨ط³ظٹط·]: ظƒط´ظپ ط*ط§ظ„ط© ط²ط± ط§ظ„ظƒط§ط¨ط³ ظ„ظˆظƒ caps lock ط¨ظˆط§ط³ط·ط© ط§ظ„ط¬ط§ظپط§ط³ظƒط±ط¨طھ (http://www.dzbatna.com/t1449492/)



السلام عليكم ورحمة الله وبركاته

مقدمة

موضوع درس مفصل اليوم مهم + بسيط وسهل في نفس الوقت
وهو كشف حالة زر الكابس لوك عند الحقول الخاصة بكلمات المرور
لان الجميع يعرف انه لو ادخلت الباسورد والكابس لوك مفعل راح يختلف الباسورد عن كونه في ظل تعطيل الكابس لوك

اوضح مثال على هذه الخاصية هو موقع الهوتميل
حاول ادخال بريدك ثم فعل الكابس لوك قبل ادخال الباسورد
راح تلاحظ انه راح ينبهك انه الكابس لوك مفعل

هذا هو غرض الدرس مفصل
وهو معرفة كيفية كشف حالة الكابس لوك وتحذير المستخدم في حال كان الزر مفعل

الحل
الحل طبعا لا يكون عن طريق الphp لانه الphp لغة server-side
يعني هي مسؤولة عن العمليات والاوامر اللي بنطلب من السيرفر SERVER يقوم بها
اما في حالتنا ، اللي هي حالة زر الكابس لوك تعتبر
client-side
او
user-side
يعني الموضوع متعلق بالمستخدم وليس بالسيرفر SERVER
اللغة المسؤولة عن جانب المستخدم في متصفحات الانترنت هي لغة الجافا سكربت
وعن طريقها راح نحل مشكلتنا




تابع معي

هذا هو كود code الجافا سكربت
ضعه في منطقة الهيد
رمز Code:
<script language=&quot;Javascript&quot;> function capLock(e){ kc = e.keyCode?e.keyCode:e.which; sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false); if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk)) document.getElementById('divMayus').style.visibili ty = 'visible'; else document.getElementById('divMayus').style.visibili ty = 'hidden'; } </script>

طبعا اللي بيتأمل الكود code بيلاحظ انه لازم نعمل div او element الايدي الها هو divMayus
ونضع فيها كلمة التحذير
الكود code راح يخفيها في حالة الكابس لوك مطفي
وراح يظهرها في حالة الكابس لوك مفعل
ولازم ايضا نضع حقل كلمة المرور ونربطه مع كود code الجافا سكربت

هذا كود code ال HTML
رمز PHP:

<code style="white-space:nowrap"> <code> <body>
<SPAN><input type="password" name="txtPassword" onkeypress="capLock(event)" />
<SPAN><div id="divMayus" style="visibility:hidden" style="border:1px solid;"><font color="red">Caps Lock is on.</font></div>
</body
</code> </code>

الناتج راح يكون كالتالي كما في الصورة
http://upload.dzbatna.net/upfiles/Q2l39025.gif
اي ملاحظة او استفسار على الدرس مفصل انا جاهز

بتهيألي الموضوع صار الان واضح
طبعا شكل الكلمة يحتاج تنسيقات css حتى يكون اجمل وهذي انا خليتها عليكم http://www.dzbatna.com/images/smilies/bigsmile.gif

الدرس مفصل: ليس من اعدادي
انا جلبت الاكواد من موقع اجنبي
وانا كتبت كلام الدرس مفصل وعدلت تعديل خفيف على الكود code
وهذا للأمانة العلمية
اخوكم مهند عيسى
في أمان الله






ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)




https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©

استعمل مربع البحث في الاسفل لمزيد من المواضيع


سريع للبحث عن مواضيع في المنتدى