Bagaimanakah Saya Boleh Menghalang Pengguna daripada Kehilangan Data Borang Tidak Disimpan Apabila Meninggalkan Halaman?

Mencegah Perubahan Tidak Disimpan pada Pengabaian Halaman

Apabila pengguna menavigasi keluar dari halaman dengan data borang yang tidak disimpan, adalah penting untuk menggesa mereka mengesahkan mereka niat untuk mengelakkan kehilangan kerja mereka. Untuk melaksanakan ini:

Pendekatan Ringkas tetapi Terhad:

window.addEventListener("beforeunload", function (e) {
  e.returnValue = "Warning: Unsaved changes. Are you sure you want to leave?";
});

Pendekatan ini, walau bagaimanapun, mencetuskan mesej pengesahan walaupun apabila data borang diserahkan, memerlukan penyelesaian.

Penyelesaian Komprehensif dengan Kotor Bendera:

Untuk mengelakkan mesej pengesahan daripada muncul pada daun halaman yang tidak berkaitan, gunakan bendera "kotor" yang menunjukkan apabila data borang telah ditukar.

const isDirty = () => false;

window.addEventListener("beforeunload", function (e) {
  if (formSubmitting || !isDirty()) {
    return;
  }

  e.returnValue = "Warning: Unsaved changes. Are you sure you want to leave?";
});

Laksanakan isDirty kaedah menggunakan:

• Pendekatan berasaskan acara: Pantau interaksi pengguna untuk mengesan perubahan, tetapi pertimbangkan pengehadan seperti tidak mencetuskan pemotongan dan penampalan.
• jQuery Dirty Plugin: Pustaka yang mudah untuk mengesan perubahan borang dan menghalang keluar halaman dengan mesej tersuai.

Amaran: Sokongan Penyemak Imbas Terhad

Perhatikan bahawa pengesahan tersuai mesej tidak lagi disokong dalam sesetengah penyemak imbas, seperti Chrome 51 dan lebih baharu. Alternatif termasuk memaparkan dialog generik dengan butang "Tinggalkan" dan "Tinggal".

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Pengguna daripada Kehilangan Data Borang Tidak Disimpan Apabila Meninggalkan Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!