Rumah > hujung hadapan web > tutorial js > Javascript melaksanakan menekan kekunci Enter untuk menukar kemahiran focus_javascript

Javascript melaksanakan menekan kekunci Enter untuk menukar kemahiran focus_javascript

WBOY
Lepaskan: 2016-05-16 16:15:12
asal
1554 orang telah melayarinya

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.

Salin kod Kod adalah seperti berikut:



   
   


   

       

       

       

       

       

       



         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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan