javascript - معلم - جافاسكريبت كيبوارد إيفنتس بريمر؟(أو بالأحرى: مساعدتي مع القائمة المنسدلة المخصصة)




شرح جافا سكريبت (2)

أنا بحاجة إلى مساعدة إنهاء بلدي مخصص بنيت أجاكس [ديف] القائمة المنسدلة الديناميكية.

في الأساس، لدي مربع [المدخلات] التي؛ onkeyup ، يدير بحث اياكس الذي يعود مجموعة من النتائج في div s ويتم رسمها مرة أخرى في استخدام innerHTML . هذه div جميع لها أبرز onmouseover لذلك، البحث الناجح نموذجي ينتج الهيكل التالي (العفو شبه رمز):

[input]
 [div id=results] //this gets overwritten contantly by my AJAX function
  [div id=result1 onmouseover=highlight onclick=input.value=result1]
  [div id=result2 onmouseover=highlight onclick=input.value=result2]
  [div id=result2 onmouseover=highlight onclick=input.value=result2]
 [/div]

يعمل .. جميل! تبدو أنيقة وهي طريقة أكثر اكتمالا من أي المنسدلة العادية (تلك النتائج ديف جلب الكثير من المعلومات).

ومع ذلك، أنا في عداد المفقودين معظم الوظائف الهامة وراء عناصر هتمل العادية، وهذا هو، لا أستطيع لوحة المفاتيح إلى أسفل أو ما يصل بين "خيارات". كيف أقوم بهذا العمل؟ أعرف أن جافاسكريبت يتعامل مع أحداث لوحة المفاتيح ولكن؛ لم أتمكن من العثور على دليل جيد حول كيفية القيام بذلك. (بطبيعة الحال، فإن سؤال المتابعة إلى هذا سوف ينتهي في النهاية إلى: هل يمكنني استخدام <ENTER> لتشغيل حدث onclick هذا؟)


ما عليك القيام به هو إرفاق مستمعي الحدث إلى div مع id="results" . يمكنك القيام بذلك عن طريق إضافة onkeyup ، onkeydown ، الخ سمات إلى div عند إنشائه أو يمكنك إرفاق هذه باستخدام جافا سكريبت.

توصيتي هي أن تستخدم مكتبة أجاكس مثل يوي ، مسج ، النموذج ، وما إلى ذلك لسببين:

  1. يبدو وكأنك تحاول إنشاء عنصر تحكم تلقائي كامل وهو شيء يجب أن توفره معظم ليباجيس أجاكس. إذا كنت تستطيع استخدام مكون موجود سوف توفر نفسك الكثير من الوقت.
  2. حتى إذا كنت لا تريد استخدام عنصر التحكم الذي توفره المكتبة، فإن جميع المكتبات توفر مكتبات الأحداث التي تساعد على إخفاء الاختلافات بين واجهات برمجة التطبيقات للحدث التي توفرها متصفحات مختلفة.

ننسى أديفنت، استخدام ياهو! ق الحدث مساعدة يوفر ملخصا جيدا لما يجب أن توفره مكتبة الحدث بالنسبة لك. أنا متأكد من أن المكتبات الحدث التي تقدمها جكري، النموذج، وآخرون. الله. توفير ميزات مماثلة.

إذا ذهبت هذه المادة على رأسك إلقاء نظرة على هذه الوثائق أولا ثم إعادة قراءة المادة الأصلية (لقد وجدت المادة أكثر من ذلك بكثير معنى بعد كنت قد استخدمت مكتبة الحدث).

زوجان من الأشياء الأخرى:

  • استخدام جافا سكريبت يمنحك تحكم أكثر بكثير من كتابة onkeyup الخ سمات في هتمل الخاص بك. إلا إذا كنت تريد أن تفعل شيئا بسيط حقا وأود أن استخدام جافا سكريبت.
  • إذا كنت أكتب التعليمات البرمجية الخاصة بك للتعامل مع أحداث لوحة المفاتيح مرجعية رمز مفتاح جيد هو في متناول يدي حقا.

من أعلى رأسي، أعتقد أنك ستحتاج إلى الاحتفاظ ببعض أشكال بنية البيانات في جافا سكريبت التي تعكس العناصر الموجودة في القائمة المنسدلة الحالية. ستحتاج أيضا إلى مرجع إلى العنصر النشط / المحدد حاليا.

في كل مرة يتم keyup أو keyup ، قم بتحديث المرجع إلى العنصر النشط / المحدد في بنية البيانات. لتوفير معلومات تسليط الضوء على واجهة المستخدم، أضف أو أزل اسم الفصل الذي تتم صيانته عبر كس استنادا إلى ما إذا كان العنصر نشطا / محددا أم لا.

أيضا، هذه ليست بيغتي، ولكن innerHTML ليست حقا معيار (ننظر createTextNode() ، createTextNode() createElement() ، و appendChild() لطرق القياسية لإنشاء البيانات). قد تحتاج أيضا إلى الاطلاع على إرفاق معالجات الأحداث في جافا سكريبت بدلا من ربطها في سمة هتمل.





keyboard