Saya belajar HTML dan CSS beberapa waktu lalu, menjadi tertarik pada bidang ini, dan mulai belajar pemrograman lanjutan di JavaScript (edisi ketiga). Saya telah belajar hari ini dan baru saja mempelajari konten acara dan membentuk skrip. Beberapa hari yang lalu, guru meminta saya untuk menulis sepotong kode: dalam bentuk JavaScript, gunakan tombol Enter dan tombol bergerak ke atas dan ke bawah dan kanan untuk memindahkan fokus dari satu kotak teks ke kotak teks sebelumnya atau berikutnya. Saya mencoba menulis kode menggunakan pengetahuan yang telah saya pelajari sejauh ini. Saya menemukan beberapa kesulitan dalam penulisan: perhitungan modulus; Gunakan ini dan argumen untuk menemukan peristiwa pemicu di dalam fungsi; Gunakan metode AddHandler () untuk menambahkan penangan acara ke acara tersebut. Dengan bantuan guru, saya memecahkan masalah di atas. Saya merasa bahwa saya telah belajar banyak pengetahuan melalui kode ini, jadi saya menulis komentar setelah menyelesaikannya dan menerbitkannya.
Salinan kode adalah sebagai berikut:
<Html>
<head lang = "en">
<meta charset = "UTF-8">
<title> </title>
</head>
<body>
<sorm>
<div> <input type = "text"> </div>
<div> <input type = "text"> </div>
<div> <input type = "text"> </div>
<div> <input type = "text"> </div>
<div> <input type = "text"> </div>
<div> <input type = "kirim"> </div>
</form>
<script>
fungsi is_down (e) {
var isdown;
E = E || window.event;
switch (e.keycode) {
Kasus 13: // Masukkan kunci
Kasus 39: // Pindahkan kunci ke kanan
Kasus 40: // Pindah Kunci Down
isDown = true;
merusak;
Kasus 37: // Pindahkan kunci ke kiri
Kasus 38: // Pindah Kunci
isDown = false;
merusak;
}
kembalikan isdown;
}
fungsi key_up () {
// Saat memanggil fungsi, fungsi itu sendiri akan menghasilkan ini dan argumen
// Gunakan ini dan argumen untuk menemukan bidang dan memicu peristiwa masing -masing
var e = argumen [1];
return is_down (e) === Tidak ditentukan? true: handle_element (this, is_down (e));
}
function handle_element (bidang, is_down) {
var elemen = field.form.elements;
untuk (var i = 0, len = elemen.lements-1; i <len; i ++) {
if (field == elemen [i]) {
merusak;
}
}
i = is_down? (i + 1) % len: (i - 1) % len;
// (0 === i && is_down) -> tekan tombol bawah setelah kotak teks terakhir diperoleh fokus
// (-1 === i &&! Is_down)-> tekan tombol UP setelah kotak teks pertama difokuskan
if ((0 === i && is_down) || (-1 === i &&! is_down)) {
Kembali Benar;
}
elemen [i] .focus ();
var element_arr = ['tombol', 'kirim', 'reset', 'select-one', 'textarea'];
if (element_arr.join (','). indexOf (elemen [i] .type)> -1)
elemen [i] .select ();
mengembalikan false;
}
// Batal Masukkan acara Formulir Pengajuan Default
document.onkeydown = function (e) {
E = E || window.event;
if (e.keycode == 13) {
E.PreventDefault? e.preventdefault (): (e.ReturnValue = false);
}
};
// Kenali AddEventListener dan AttachEvent (yaitu) di seberang browser
fungsi addHandler (elemen, type, handler) {
if (element.addeventlistener)
element.addeventListener (tipe, pawang, false);
lain jika (element.attachevent)
element.attachevent ("on" + type, handler);
kalau tidak
elemen ["on" + type] = handler;
}
var elemen = document.forms [0] .eelements;
untuk (var i = 0, len = elemen.lements; i <len; i ++) {
// Tambahkan Key_up Event Handler untuk acara Keyup
addhandler (elemen [i], "keyup", key_up);
}
</script>
</body>
</html>
Di atas adalah semua konten kode. Saya pribadi merasa bahwa tulisannya cukup komprehensif, dan semua hal yang harus dipertimbangkan telah diproses. Saya harap semua orang menyukainya.