Saya belajar HTML dan CSS beberapa ketika dahulu dan mula berminat dengan aspek ini. Saya juga mula belajar Pengaturcaraan Lanjutan JavaScript (Edisi Ketiga yang saya pelajari hari ini dan baru belajar tentang acara dan skrip borang). Beberapa hari yang lalu, guru meminta saya menulis sekeping kod: dalam bentuk javascript, gunakan kekunci enter dan kekunci atas, bawah, kiri dan kanan untuk mengalihkan fokus daripada satu kotak teks ke teks sebelumnya atau seterusnya. kotak. Menggunakan pengetahuan yang dipelajari setakat ini, saya cuba menulis kod saya menghadapi beberapa kesukaran semasa proses menulis: pengiraan modulus menggunakan ini dan argumen di dalam fungsi untuk mencari acara pencetus menggunakan kaedah addHandler() untuk peristiwa itu. Dengan bantuan guru, saya menyelesaikan masalah di atas saya merasakan bahawa saya telah mempelajari banyak mata pengetahuan melalui kod ini, jadi saya akan menulis komen selepas selesai dan menerbitkannya.
fungsi is_down(e) {
var isDown;
e = e || window.event;
suis (e.keyCode) {
kes 13: //Masukkan kunci
kes 39: //Alih kekunci kanan
kes 40: //Kekunci Gerakkan ke bawah
Isdown = true;
rehat;
kes 37: //Alih kekunci kiri
kes 38: //Kekunci alihkan ke atas
isDown = palsu;
rehat;
}
return isDown;
}
key_up() fungsi{
//Apabila memanggil fungsi, fungsi itu sendiri akan menjana ini dan argumen
//Gunakan ini dan hujah untuk mencari medan dan peristiwa yang dicetuskan masing-masing
var e=arguments[1];
return is_down(e) === undefined true : handle_element(this, is_down(e));
}
fungsi handle_element(medan, is_down) {
var elemen = medan.bentuk.elemen;
untuk (var i = 0, len = elements.length-1; i < len; i ) {
Jika (medan == elemen[i]) {
rehat;
}
}
i = is_down ? (i 1) % len : (i - 1) % len;
//(0===i && is_down) --> Selepas kotak teks terakhir mendapat fokus, tekan kekunci bawah
//(-1===i && !is_down) --> Selepas kotak teks pertama mendapat fokus, tekan kekunci atas
Jika((0===i && is_down)||(-1===i && !is_down)){
kembali benar;
}
elemen[i].fokus();
var element_arr = ['butang', 'serahkan', 'set semula', 'pilih-satu', 'textarea'];
Jika (elemen_arr.join(',').indexOf(elements[i].type) > -1)
elemen[i].select();
pulangan palsu;
}
//Batalkan acara borang penyerahan lalai pada Enter
document.onkeydown = fungsi(e) {
e = e || window.event;
If(e.keyCode == 13) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}
};
//Pengiktirafan merentas pelayar addEventListener dan attachEvent(IE)
fungsi addHandler(elemen, jenis, pengendali) {
jika (elemen.addEventListener)
elemen.addEventListener(jenis, pengendali, palsu);
jika tidak (element.attachEvent)
element.attachEvent("on" type, handler);
lain
elemen ["on" type] = pengendali;
}
elemen var = document.forms[0].elements;
untuk (var i = 0, len = elements.length; i < len; i ) {
//Tambah pengendali acara key_up untuk acara keyup
addHandler(elemen[i], "keyup", key_up);
}
Di atas adalah keseluruhan kandungan kod Saya secara peribadi merasakan bahawa penulisannya agak komprehensif dan semua tempat yang perlu diambil kira telah diuruskan.