How to Stop the Browser Back Button Using JavaScript

How can I stop the browser back button using JavaScript?

There are numerous reasons why disabling the back button will not really work. Your best bet is to warn the user:

window.onbeforeunload = function() { return "Your work will be lost."; };

This page does list a number of ways you could try to disable the back button, but none are guaranteed:

http://www.irt.org/script/311.htm

Trying to disable the browser's back button

FOA, Thanks everyone for your answers.

Finally below code gave me the solution:

history.pushState(null, null, window.location.href);
history.back();
window.onpopstate = () => history.forward();

Disable browsers' back button, completely

Based on your post it sounds like your only issue is disabling the backspace button from allowing the user to go back.

Here's what I do for that using jquery. Still allows backspace to work inside enabled text editing inputs, where it should.

    // Prevent the backspace key from navigating back.
    $(document).unbind('keydown').bind('keydown', function (event) {
        var doPrevent = false;
        if (event.keyCode === 8) {
            var d = event.srcElement || event.target;
            if ((d.tagName.toUpperCase() === 'INPUT' && (d.type.toUpperCase() === 'TEXT' ||
                                                         d.type.toUpperCase() === 'PASSWORD' ||
                                                         d.type.toUpperCase() === 'FILE')) ||
                                                         d.tagName.toUpperCase() === 'TEXTAREA') {
                doPrevent = d.readOnly || d.disabled;
            }
            else {
                doPrevent = true;
            }
        }

        if (doPrevent) {
            event.preventDefault();
        }
    });

Disable browser back button for one page application

I work in AngularJS building a Single Page App and I wanted to disable or prevent the back button of the browser, because my app has buttons and anchors for all navegation into my app.

I searched and test many codes, and this is the easy to prevent the back button of browsers and the following code worked for me.

window.onpopstate = function (e) {
window.history.forward(1); }

When the history detects the first history.back()

window.onpopstate

is executed, then after this moment any back or forward in history are detected for onpopstate event.

How to completly disable back button of a browser while taking online exam?

Try this script

<script>
window.location.hash="no-back-button";
window.location.hash="Again-No-back-button";//again because google chrome don't insert first hash into history
window.onhashchange=function(){window.location.hash="no-back-button";}
</script> 

Also refer this link. This link contain demo & Download code

Disabling Back button on the browser

It's not possible, sadly. However, consider your applications navigation model. Are you using Post/Redirect/Get PRG Model? http://en.wikipedia.org/wiki/Post/Redirect/Get?

This model is more back button friendly than the Postback model.

---

Related Topics