Memblokir tombol Back di web aplikasi adalah praktik yang perlu dilakukan dengan hati-hati, karena dapat mengganggu pengalaman pengguna jika tidak diterapkan dengan tepat. Namun, ada situasi tertentu di mana memblokir tombol Back itu dipakai, terutama untuk menjaga alur aplikasi atau mencegah masalah teknis. Kita akan share 3 poin utamanya di tutorial kali ini:

• Ketika pengguna sedang mengisi formulir panjang (misalnya pendaftaran, aplikasi keuangan, atau survei).
• Dalam alur proses langkah-langkah, seperti checkout e-commerce atau aplikasi pembayaran.
• Jika halaman sebelumnya tidak lagi relevan setelah pengguna mengambil tindakan (logout, dll).

Lalu secara prakteknya, bagaimana menerapkannya? Pilih salah satu pendekatan yang cocok. Karena semua bisa dilakukan cukup menggunakan javascript :

function disableBack() { window.history.forward(); }
setTimeout(“disableBack()”, 0);
window.onunload = function () { null };

atau boleh juga dengan pendekatan lainnya:

window.history.pushState(null, null, window.location.href);
window.onpopstate = function () {
window.history.go(1);
};

masih kurang lengkep ? Bisa pakai juga yang ini :

function preventBack() { window.history.forward(); }
setTimeout(“preventBack()”, 0);
window.onunload = function () { null };

Cara Pemasangannya?

1. gunakan script tadi simpan di back-blocker.js
2. buka file view layout.html anda lalu tambahkan:

<script src=”back-blocker.js” type=”javascript” > </script>

sesimple itu? Yes…! Cobalah…. good luck.