Disabling Back Button on Browser

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
APD TorontoSoftware DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
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 DeveloperAuthor Commented:
What about  in settings?
APD TorontoSoftware DeveloperAuthor Commented:
Also, the users are known, so they can and will accept any custom script from me.
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Download eBook now!
Scott FellDeveloper & EE ModeratorCommented:
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 ProblemsCommented:
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 DeveloperAuthor 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 ProblemsCommented:
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 ProblemsCommented:
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 DeveloperAuthor 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 ProblemsCommented:
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 DeveloperAuthor 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 ProblemsCommented:
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 DeveloperAuthor 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 ProblemsCommented:
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.
Michel PlungjanIT ExpertCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
APD TorontoSoftware DeveloperAuthor Commented:
Thank you!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.