عند الوصول إلى طول الإدخال ، سيقوم النموذج تلقائيًا بتبديل التركيز

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

نسخة الكود كما يلي:

<form id = "myForm">

<type type = "text" name = "tel1" id = "txt1" maxLength = "3">-

<type type = "text" name = "tel2" id = "txt2" maxLength = "3">-

<type type = "text" name = "tel3" id = "txt3" maxLength = "4">

<br>

<type type = "إرسال" القيمة = "إرسال">

</form>

نسخة الكود كما يلي:

(وظيفة () {

وظيفة tabforward (e) {

e = e || window.event ؛

var target = e.target || e.srcelement ؛

if (target.value.length === Target.MaxLength) {

var form = target.form ؛

لـ (var i = 0 ، len = form.element.length ؛ i <len ؛ i ++) {

if (form.elements [i] === target) {

if (form.elements [i ++]) {

form.Elements [i ++]. focus () ؛

}

استراحة؛

}

}

}

}

var textbox1 = document.getElementById ("txt1") ؛

var textbox2 = document.getElementById ("txt2") ؛

var textbox3 = document.getElementById ("txt3") ؛

TextBox1.AdDeventListener ("keyup" ، tabForward ، false) ؛

TextBox2.AdDeventListener ("keyup" ، tabForward ، false) ؛

TextBox3.AdDeventListener ("keyup" ، tabForward ، false) ؛

}) () ؛

الرمز بسيط للغاية. التركيز التالي.

دعنا نتحدث بإيجاز عن سمتين:

تشير خاصية النموذج Target.form إلى النموذج الذي ينتمي إليه الحقل الحالي

سمة Element.Elements Elements هي مجموعة من جميع عناصر النماذج (الحقول) في شكل. هذه المجموعة من العناصر هي قائمة مرتبة تحتوي على جميع الحقول في النموذج ، مثل <pection> و <textarea> و <button> و <fieldset>. كل حقل نماذج في الترتيب الذي تظهر به في العلامات بنفس الترتيب الذي يمكن الوصول إليه من خلال سمات الموقع والاسم. على سبيل المثال:

نسخة الكود كما يلي:

var form = document.getElementById ("myform") ؛

var textbox1 = form.Elements [0] ؛

var textbox2 = form.Elements ["tel2"] ؛

أخيرًا ، دعونا نلقي نظرة على الكود أعلاه وتجد أنه لا يزال هناك بعض المشكلات ، مثل هذا الرمز

نسخة الكود كما يلي:

var textbox1 = document.getElementById ("txt1") ؛

var textbox2 = document.getElementById ("txt2") ؛

var textbox3 = document.getElementById ("txt3") ؛

TextBox1.AdDeventListener ("keyup" ، tabForward ، false) ؛

TextBox2.AdDeventListener ("keyup" ، tabForward ، false) ؛

TextBox3.AdDeventListener ("keyup" ، tabForward ، false) ؛

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

يبقى الكود الآخر دون تغيير.

نسخة الكود كما يلي:

var form = document.getElementById ("myform") ؛

Form.AdDeventListener ("keyup" ، tabForward ، false) ؛

ثم ما هي لجنة الحدث؟

يستفيد تفويض الأحداث من فقاعات الأحداث ، ويحدد فقط معالج الأحداث لإدارة جميع الأحداث من نوع معين. على سبيل المثال ، بالنسبة لحدث Keyup هنا ، تحتاج فقط إلى تحديد معالج أحداث OnKeyup لعنصر النموذج ، دون إضافة أحداث إلى كل حقل.