Link to home
Start Free TrialLog in
Avatar of APD Toronto
APD TorontoFlag for Canada

asked on

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
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

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.
Avatar of APD Toronto

ASKER

What about  in settings?
Also, the users are known, so they can and will accept any custom script from me.
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.
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
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?
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?
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.
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?
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?
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?
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.
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?
SOLUTION
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you!