Disabling Back Button on Browser

APD Toronto
APD Toronto used Ask the Experts™
on
Hi Experts,

I have a web application that takes a lot of data-entry...  Often, when an user doesn't have focus on a field and clicks Backspace, their data is wiped.

Is it possible to disable Back using JS? If no, can I disable it for individual browser (FireFox, Chrome, Safari) for a particular subdomain?

Of course, I prefer JS.

Thank you
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
I don't think you can do that.  This has been asked before here.  Taking 'control' of a user's browser is considered a breach of security.  

When I have had to do a long form, I have broken it into  smaller pages and used PHP sessions and MySQL to track what they have entered so it doesn't get lost.
APD TorontoSoftware Developer

Author

Commented:
What about  in settings?
APD TorontoSoftware Developer

Author

Commented:
Also, the users are known, so they can and will accept any custom script from me.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
There is still no reason to block the back button.  You can't control that.  However, you can control the user input gui.

If you have a long form, convert to a wizard where there is just a small amount of data and keep saving with each "next" button pressed.  Or you can use your javascript to send an ajax request to save after each field looses focus.

When the user first steps into the form, create some type of token that is saved as session.  Then store that session token in your db and insert a new row.  Then each time a user enters a field and moves out of the field, update that row of data using the session token as they key.  Now if they happen use the back button and save again, you already know the token and are just updating those fields.

It's all in your process. But trying to do anything that prevents a user from using their browser functions will just be a pain point for everybody.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
I have never seen anything that could disable the back button.  Not anywhere.  There is a function in JavaScript called 'onbeforeunload' which usually just pisses people off because it is used to keep people from leaving a web page.  I can't give you sample code for it but it is fairly well documented.
http://www.w3schools.com/tags/ev_onbeforeunload.asp
APD TorontoSoftware Developer

Author

Commented:
OK, can we look at this differently...

Leave the Back button as it is, but somehow "Listen" for the Backspace key via ASCII #. Then when pressed, if within a textbox or textarea, normal behavior, otherwise don't do nothing?
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Huh??  The Backspace key is used for editing and has nothing to do with the Back button.  I just moved the focus out of this text box and pressed the Backspace key 3 times.  Nothing happened.  Firefox 42.0.  What browser are you using?
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Maybe I should also note that there are other ways to go 'Back'.  I think you need to focus on how to get your users to go forward successfully.
APD TorontoSoftware Developer

Author

Commented:
The client won't approve of the wizard-style input, they need to view multiple things...

Backspace is ASCII #8, http://www.theasciicode.com.ar/ascii-control-characters/backspace-ascii-code-8.html

I know there is a way (keypress or keydown) event, the fires before the onchange? can I use that somehow?
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Backspace key has nothing to do with the browser Back function.  There, I said it again.  From this side of the screen, you're not making any sense.  Can you give us a simple example of the problem you're having?
APD TorontoSoftware Developer

Author

Commented:
When pressing backspace on most browsers, including FF 42.0, it does go back.

You said you could not replicate... click on an empty space on this page (not on any field, not on any link), then press backspace.  If you don't go back, maybe you have disassociated backspace with back?
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
I did and it doesn't do that here in Firefox 42.  I did it in Chrome and it does go Back.  I've never done that before.

Oh, never mind.  Since this page opened in a new Tab, there isn't any Back page to go to.  Hmm... maybe you can use that to your advantage.  ??  Open the problem page in a new tab or window and there isn't any Back page to go to.
APD TorontoSoftware Developer

Author

Commented:
As I don't know JQUERY, Can you explain the code below that I got from stackoverflow.com/questions/11112127/prevent-backspace-from-navigating-back-with-jquery-like-googles-homepage

$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input:not([readonly]):not([type=radio]):not([type=checkbox]), textarea, [contentEditable], [contentEditable=true]")) {
        e.preventDefault();
    }
});

Open in new window


How do I incorporate it?
Dave BaldwinFixer of Problems
Most Valuable Expert 2014
Commented:
First you have to be loading jQuery.  That code is supposed to identify the Backspace keycode (8) and if it the focus in not in one of the items in the list, prevent the default action of going Back.
IT Expert
Top Expert 2009
Commented:
To use jQuery you need to add jQUery to your page.
This can be done using a so-called CDN (content delivery network) or you can save the js file on your server.

You can serve the https or http version or if you do not load from local disk, remove the protocol liek this:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Open in new window


In the example below I removed contenteditable since you likely do not need it.

The structure of your page will be  

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>Page title</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).on("keydown", function (e) {  // any key
  if (e.which === 8 && // if backspace in an input field or textarea, prevent the default backspace action
  !$(e.target).is("input:not([readonly]):not([type=radio]):not([type=checkbox]), textarea")) {
    e.preventDefault();
  }
});
</script>
</head>
<body>
  your page
</body>
</html>

Open in new window

APD TorontoSoftware Developer

Author

Commented:
Thank you!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial