Permasalahan

Saat ini saya sedang membuat project form registrasi, yang mana di dalamnya terdapat form wizard yang semua inputan harus diisi oleh user. Jadi saya ingin jika user melakukan refresh, reload atau beranjak ke halaman lain baik itu dengan menekan tombol F5 pada keyboard, menekan tombol reload di browser dan lain sebagainya maka akan tampil sebuah pesan popup peringatan apakah yakin akan beranjak ke halaman lain atau tetap dihalaman tersebut.

Penyelesaian

Akhirnya masalah ini terpecahkan dengan menggunakan Window: beforeunload event, Silahkan copy code javascript dibawah ini ke halaman html anda

<script type="text/javascript">
//Vanilla JS
window.addEventListener('beforeunload', (event) => { 
  event.preventDefault(); 
  event.returnValue = '';
}); 

//Jquery 3x
$(window).on("beforeunload", function(e) {
  return "Are you sure you want leave?";
});
</script>

Kemudian jika ingin menonaktifkan perintah tersebut bisa dengan script dibawah ini:

<script type="text/javascript">
//Vanilla JS
window.onbeforeunload = null;

//Jquery 3x
$(window).off("beforeunload");
</script>

Browser yang sudah suport Window: beforeunload event

Browser compatibility Window: beforeunload event

Beberapa penampakan popup dari setiap browser

https://i.stack.imgur.com/x5blG.png
https://i.stack.imgur.com/rpxhz.png

Kesimpulan

Sekarang jika user akan beranjak ke halaman lain maka akan muncul popup konfirmasi apakah akan benar-benar meninggalkan halaman atau akan tetap di halaman tersebut. dengan metode ini diharapan user akan tetap di halaman registrasi hingga akhir dan selesai mengisi semua form yang di perlukan. jika user meninggalkan halaman maka inputan yang sebelumnya diisi akan hilang karena user tidak mengisi form hingga akhir.

Referensi