Prevent backspace button from navigating back in Sharepoint 2010 and IE

Question

As a user requirement I have to disable the backspace button from navigating back in the history. I made the following piece of code

   //Bind back nutton to prevent escaping the page with backspace
$j(document).unbind('keydown').bind('keydown', function (event) {
  var doPrevent = false;

  if (event.keyCode === 8) 
  {
      if(event.target == document.body){
          if(event.preventDefault()){ event.preventDefault(); }
          event.stopEvent();
          event.returnValue = false;
      }
  }
});

This is working perfectly in all the browsers except IE7 and IE8. I cannot bind the input types as exceptions because the content editor in SharePoint allows modification of the text in the elements div, paragraph, etc. The solution is not working in IE8 because the event.target returns the element that is on mouseover when there are no controls that have the focus.

Machinegon · Accepted Answer · 2017-09-11T20:19:06.043

Solved by myself, case closed.

EDIT: Working in 2012 with SharePoint 2010 and jquery 1.x, not sure about today.

//Bind back button to prevent escaping the page with backspace
$(document).unbind('keydown').bind('keydown', function (event) {
    if (event.keyCode === 8) 
    {
     var doPrevent = true;
     //Chrome, FF, Safari
     if(event.target == document.body){
      doPrevent = true;
     }
     //IE
     else
     {
      var nodeName = event.target.nodeName.toLowerCase();
      if((nodeName == "input" && event.target.type == "text") || nodeName == "textarea")
      {
       doPrevent = false;
      }
      var SPEditTabInstance = $(document).find("li[id='Ribbon.EditingTools']");
      if(SPEditTabInstance != "undefined" && SPEditTabInstance != null && $(SPEditTabInstance).children().length > 0){
       doPrevent = false;
      }
     }

     if(doPrevent)
     {
      //Chrome, FF, Safari
      if(event.preventDefault()){ event.preventDefault(); }
      //IE
      else
      {
       event.returnValue = false;
      }
     }
    }
});

@Zubar You can rebind jquery ($) to anything you like. $j in this case besauce of conflicting variable and it did worked in 2012 with sharepoint 2010. It probably doesnt today. — Machinegon, Sep 09 '17 at 23:09
@Zubair With SP2010? The code above might work if it's adapted a bit. It will not work at all for 2013 or superior. — Machinegon, Sep 11 '17 at 20:17

score 1 · Answer 2 · answered Jan 17 '17 at 23:52

I'd recommend a tweak to Machinegon's fix. The code should also prevent default behavior if the user clicks the backspace key in a readonly input control of type text.

if ((nodeName === "input" && event.target.type === "text") || 
     nodeName === "textarea") {
     doPrevent = event.target.readOnly;
}

score 0 · Answer 3 · answered Nov 22 '12 at 00:42

0

Try pushing back to the person(s) creating the requirements that breaking a ubiquitous and important function of all browsers is not a particularly great idea from a usability perspective. The costs of doing so (including time spent explaining to users why thier browser "don't work no more") will greatly outweight the costs of having the back button be a bit annoying occaisionally.

answered Nov 22 '12 at 00:42

Nat

14,175
5
41
64

The requirements are coming directly from the client and explaining them why we should not implement the functions they want is like talking to a rock. I suspect that the users that will be using this application don't even know the existence of this back function in browsers. – Machinegon Nov 22 '12 at 00:51
My commiserations then, I still reckon it is worth a go to get the client to a position where they will trust your technical judgement. – Nat Nov 22 '12 at 00:59

score 0 · Answer 4 · answered Jul 31 '18 at 09:14

Machinegon's answer works well, I'm just adding to it to handle one more case.

If the input boxes are readonly or disabled, and if you hit backspace on them, then it goes to previous page. So the following code will work to handle that scenario:

//Bind back button to prevent escaping the page with backspace
$(document).unbind('keydown').bind('keydown', function(event) {
    if (event.keyCode === 8) {
        var doPrevent = true;
        //Chrome, FF, Safari
        if (event.target == document.body) {
            doPrevent = true;
        }
        //IE
        else {
            var nodeName = event.target.nodeName.toLowerCase();
            if (((nodeName == "input" && event.target.type == "text") || nodeName == "textarea") 
              && !event.target.disabled && !event.target.readOnly) {
                doPrevent = false;
            }
        }

        if (doPrevent) {
            //Chrome, FF, Safari
            if (event.preventDefault()) {
                event.preventDefault();
            }
            //IE
            else {
                event.returnValue = false;
            }
        }
    }
});

Prevent backspace button from navigating back in Sharepoint 2010 and IE

4 Answers4