Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Mencegah Pengabaian Borang Web Semasa Melindungi Data Tidak Disimpan?

Bagaimanakah Saya Boleh Mencegah Pengabaian Borang Web Semasa Melindungi Data Tidak Disimpan?

Patricia Arquette
Lepaskan: 2024-12-06 08:22:10
asal
583 orang telah melayarinya

How Can I Prevent Web Form Abandonment While Protecting Unsaved Data?

Mencegah Pengabaian Borang tanpa Kehilangan Data

Apabila pengguna menavigasi keluar dari halaman web dengan data borang yang tidak disimpan, ia boleh mengecewakan untuk kehilangan mereka kemajuan. Melaksanakan gesaan amaran adalah penting untuk memastikan integriti data dan kepuasan pengguna.

Melaksanakan Peristiwa BeforeUnload

Pendekatan pertama melibatkan pengendalian acara beforeunload dan mengembalikan bukan null rentetan. Walau bagaimanapun, ambil perhatian bahawa menyerahkan borang juga boleh mencetuskan acara ini. Untuk mengurangkan perkara ini, tetapkan bendera (formSubmitting) untuk menunjukkan penyerahan borang dan sekat gesaan dengan sewajarnya.

window.onload = function () {
    window.addEventListener("beforeunload", function (e) {
        if (formSubmitting) {
            return;
        }

        var confirmationMessage = 'Unsaved changes will be lost.';
        (e || window.event).returnValue = confirmationMessage; // IE
        return confirmationMessage; // Others
    });
};
Salin selepas log masuk

Menggunakan Bendera "Kotor"

Untuk mengelakkan gesaan pengguna apabila tiada perubahan dibuat, gunakan "kotor" bendera.

var isDirty = function () { return /* logic here */ };

window.onload = function () {
    window.addEventListener("beforeunload", function (e) {
        if (formSubmitting || !isDirty()) {
            return;
        }
        
        // Display prompt here
    });
};
Salin selepas log masuk

Pendekatan Alternatif

  • jQuery dan Pensirilan Borang: Kaedah ini mempunyai had kerana ia melangkau elemen yang dilumpuhkan dan tidak dinamakan .
  • Acara: Penekanan kekunci dan peristiwa perubahan tidak selalu menangkap semua perubahan, termasuk yang dibuat melalui JavaScript atau input maya.

Penyelesaian Pihak Ketiga

Pertimbangkan untuk memanfaatkan perpustakaan terbukti untuk memudahkan pelaksanaan:

  • jQuery.dirty: Mengesan perubahan borang dan menghalang keluar dengan data yang tidak disimpan.
  • jQuery Adakah Anda Pasti? (ditamatkan): Menawarkan mesej tersuai dan ciri berguna lain.

Pertimbangan Penyemak Imbas

Mesej tersuai mungkin tidak disokong dalam penyemak imbas moden seperti Firefox dan Chrome. Pertimbangkan untuk menggunakan dialog penyemak imbas lalai untuk kejelasan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencegah Pengabaian Borang Web Semasa Melindungi Data Tidak Disimpan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan