Saat panjang input tercapai, formulir akan secara otomatis beralih fokus

Terkadang Anda akan menemukan bidang bentuk yang mirip dengan yang di atas. Kami dapat membatasi panjang input untuk setiap bidang, dan secara otomatis beralih fokus ketika panjang input tercapai untuk meningkatkan kemudahan bentuk

Salinan kode adalah sebagai berikut:

<Form id = "myForm">

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

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

<input type = "text" name = "tel3" id = "txt3" maxlength = "4">

<br>

<input type = "kirim" value = "kirim">

</form>

Salinan kode adalah sebagai berikut:

(fungsi () {

fungsi tabforward (e) {

E = E ||

var target = e.target ||

if (target.value.length === target.maxlength) {

var form = target.form;

untuk (var i = 0, len = form.elements.length; i <len; i ++) {

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

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

form.elements [i ++]. focus ();

}

merusak;

}

}

}

}

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);

}) ();

Kode sebenarnya sangat sederhana. Fokus berikutnya.

Mari kita bicara secara singkat tentang dua atribut:

Target.FORM PROPERTI PROPERTI PODUS UNTUK FORMULIR DI MEREKA Bidang Saat Ini

Atribut Elemen Form.Elements adalah kumpulan semua elemen bentuk (bidang) dalam suatu bentuk. Koleksi elemen ini adalah daftar yang dipesan yang berisi semua bidang dalam bentuk, seperti <sput>, <TextAtarea>, <button>, dan <fieldset>. Setiap bidang formulir ada dalam urutan di mana mereka muncul di tag dalam urutan yang sama dengan yang dapat diakses oleh lokasi dan atribut nama. Misalnya:

Salinan kode adalah sebagai berikut:

var form = document.geteLementById ("myForm");

var textbox1 = Form.elements [0];

var textbox2 = form.elements ["tel2"];

Akhirnya, mari kita lihat kode di atas dan temukan bahwa masih ada beberapa masalah, seperti kode ini

Salinan kode adalah sebagai berikut:

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);

Ditemukan tidak, kami menambahkan event handler yang sama ke setiap bidang. Jika Anda menggunakan metode ini untuk setiap elemen dalam aplikasi web yang kompleks, maka akan ada kode yang tak terhitung jumlahnya untuk menambahkan penangan acara sebagai hasilnya. Saat ini, delegasi acara dapat digunakan untuk menyelesaikan masalah ini

Kode lain tetap tidak berubah.

Salinan kode adalah sebagai berikut:

var form = document.geteLementById ("myForm");

form.addeventListener ("keyup", tabforward, false);

Lalu apa komisi acara tersebut?

Delegasi acara memanfaatkan gelembung acara, dan hanya menentukan penangan acara untuk mengelola semua acara dari jenis tertentu. Misalnya, untuk acara Keyup di sini, Anda hanya perlu menentukan event handler Onkeyup ke elemen formulir, tanpa menambahkan acara ke setiap bidang.