Bagaimana untuk menyemak bahawa borang HTML telah diubah

Borang HTML adalah asas kepada aplikasi web, mengendalikan penghantaran data pengguna. Walaupun banyak sumber meliputi tag dan pengesahan bentuk, mengesan

perubahan dalam data borang sering diabaikan. Artikel ini menerangkan kaedah yang cekap untuk tugas penting ini.

Takeaways utama:

Mengesan perubahan data borang meningkatkan pengalaman pengguna dan kecekapan aplikasi. Amaran boleh menghalang kehilangan data yang tidak diselamatkan apabila pengguna menavigasi. Sebaliknya, mengesan
• tidak perubahan mengoptimumkan pemprosesan sisi pelayan.
Pengendali acara
• , sementara nampaknya sesuai, mempunyai batasan: ia tidak mengesan perubahan yang dibalikkan kepada nilai asal, nilai-nilai yang diubah suai JavaScript, atau mengendalikan elemen bentuk dinamik dengan berkesan. Tidak konsisten penyemak imbas selanjutnya merumitkan penggunaannya. onchange
Pendekatan unggul melibatkan membandingkan nilai lalai terhadap nilai semasa. Walau bagaimanapun, sifat nilai lalai berbeza -beza mengikut jenis elemen bentuk.

mengapa mengesan kemas kini borang?

Mengesan perubahan bentuk membolehkan beberapa penambahbaikan:

• Mencegah Kerugian Data: Amaran Pengguna Mengenai Perubahan yang Tidak Terlibat Sebelum Meninggalkan Halaman, Berpotensi Menawarkan Pilihan Simpan (mis., Melalui Ajax).
• mengoptimumkan beban pelayan: Elakkan pengesahan sisi pelayan yang tidak perlu dan penjimatan data apabila tiada perubahan telah berlaku.

batasan onchange

pengendali acara JavaScript

mengalami beberapa kelemahan: onchange

• Perubahan kembali: Jika pengguna mengubah nilai dan kemudian membalikkannya, masih mendaftarkan perubahan. onchange
• pengubahsuaian javascript: Perubahan dibuat secara programatik melalui JavaScript tidak akan mencetuskan . onchange Overhead
• dengan bentuk besar: melampirkan kepada pelbagai elemen dalam bentuk besar memberi kesan kepada prestasi penyemak imbas. onchange
• Bentuk Dinamik: Menambah atau mengeluarkan elemen borang memerlukan menguruskan pengendali acara secara dinamik.
• tidak konsisten penyemak imbas: tingkah laku untuk kotak semak dan butang radio tidak konsisten merentas semua pelayar. onchange

Pendekatan yang lebih mantap: Membandingkan nilai lalai

Setiap elemen bentuk mempunyai harta nilai lalai yang mencerminkan keadaan awalnya. Membandingkan nilai lalai ini kepada nilai semasa dengan pasti mengesan perubahan. Walau bagaimanapun, harta tertentu berbeza:

Input Teks dan Textareas:

unsur -unsur ini menggunakan harta defaultValue Ini berfungsi untuk jenis input standard dan html5 (e -mel, tel, url, dll.).

var name = document.getElementById("name");
if (name.value !== name.defaultValue) alert("#name has changed");

kotak semak dan butang radio:

ini menggunakan harta defaultChecked (boolean):

var name = document.getElementById("name");
if (name.value !== name.defaultValue) alert("#name has changed");

nota: ada tetapi mencerminkan atribut defaultValue, bukan keadaan yang diperiksa. value

Pilih kotak (dropdowns):

Pilih Kotak Memerlukan Memeriksa

harta elemen pilihan mereka: defaultSelected

var optin = document.getElementById("optin");
if (optin.checked !== optin.defaultChecked) alert("#optin has changed");

Ini berfungsi untuk kotak pilih pilihan tunggal dengan atribut

. Mengendalikan pelbagai pilihan kotak dan senario pilihan tanpa atribut memerlukan logik gelung yang lebih canggih untuk membandingkan selected dan selected untuk setiap pilihan. selected defaultSelected

penyelesaian yang boleh diguna semula (akan datang!)

Walaupun kaedah di atas adalah berkesan, fungsi JavaScript yang boleh digunakan semula, yang mengendalikan semua jenis bentuk di seluruh pelayar adalah sangat wajar. Artikel masa depan akan menangani ini.

Soalan Lazim (Soalan Lazim)

Seksyen Soalan Lazim meliputi pelbagai aspek mengesan perubahan bentuk HTML, termasuk menggunakan bahasa JavaScript, jQuery, pelayan sisi pelayan, menghalang navigasi dengan perubahan yang tidak disimpan, dan mengendalikan jenis elemen bentuk tertentu. (Soalan Lazim Asal ditinggalkan untuk keringkasan, tetapi maklumat yang mereka kerjakan diringkaskan di atas).

Atas ialah kandungan terperinci Bagaimana untuk menyemak bahawa borang HTML telah diubah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!