Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menggesa pengguna untuk mengesahkan perubahan yang tidak disimpan sebelum meninggalkan halaman?

Bagaimana untuk menggesa pengguna untuk mengesahkan perubahan yang tidak disimpan sebelum meninggalkan halaman?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-03 13:59:10259semak imbas

How to Prompt Users to Confirm Unsaved Changes Before Leaving a Page?

Mengesahkan Perubahan Tidak Disimpan

Soalan: Bagaimanakah anda memaparkan mesej pengesahan apabila pengguna menavigasi keluar dari halaman dengan perubahan yang belum disimpan?

Penjejakan Perubahan:

Untuk menjejaki perubahan, anda boleh menggunakan pendengar acara yang mendengar perubahan dalam medan input atau elemen lain yang menyimpan data. Apabila perubahan berlaku, tetapkan bendera untuk menunjukkan bahawa terdapat perubahan yang belum disimpan.

Memaparkan Pengesahan:

Untuk memaparkan mesej pengesahan, anda boleh menggunakan window.onbeforeunload peristiwa. Ia tercetus apabila pengguna cuba menavigasi keluar dari halaman. Dalam pengendali acara ini, semak sama ada terdapat sebarang perubahan yang belum disimpan. Jika ada, paparkan mesej pengesahan menggunakan confirm().

Contoh:

// Create a flag to track changes
var hasUnsavedChanges = false;

// Add an event listener to input fields
$('input').on('change', function() {
  hasUnsavedChanges = true;
});

// Create an event handler for window.onbeforeunload
window.onbeforeunload = function() {
  if (hasUnsavedChanges) {
    return "Are you sure you want to leave this page? You have unsaved changes.";
  }
};

Atas ialah kandungan terperinci Bagaimana untuk menggesa pengguna untuk mengesahkan perubahan yang tidak disimpan sebelum meninggalkan halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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