How to Prevent the Backspace Key from Navigating Back

How can I prevent the backspace key from navigating back?

This code solves the problem, at least in IE and Firefox (haven't tested any other, but I give it a reasonable chance of working if the problem even exists in other browsers).

// Prevent the backspace key from navigating back.
$(document).unbind('keydown').bind('keydown', function (event) {
    if (event.keyCode === 8) {
        var doPrevent = true;
        var types = ["text", "password", "file", "search", "email", "number", "date", "color", "datetime", "datetime-local", "month", "range", "search", "tel", "time", "url", "week"];
        var d = $(event.srcElement || event.target);
        var disabled = d.prop("readonly") || d.prop("disabled");
        if (!disabled) {
            if (d[0].isContentEditable) {
                doPrevent = false;
            } else if (d.is("input")) {
                var type = d.attr("type");
                if (type) {
                    type = type.toLowerCase();
                }
                if (types.indexOf(type) > -1) {
                    doPrevent = false;
                }
            } else if (d.is("textarea")) {
                doPrevent = false;
            }
        }
        if (doPrevent) {
            event.preventDefault();
            return false;
        }
    }
});

Prevent BACKSPACE from navigating back with jQuery (Like Google's Homepage)

I would bind an event handler to keydown and prevent the default action of that event if we're dealing with the backspace key outside of a textarea or input:

$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input, textarea")) {
        e.preventDefault();
    }
});

Disable backspace navigation in browser

window.onkeydown = function(e) {
  if (e.keyCode == 8 && e.target == document.body)
    e.preventDefault();
}

Explanation: The backspace key has keycode 8. Calling "preventDefault" means that the event does not cause the default behaviour of pressing the backspace key (i.e. navigating back a page). This behaviour only happens if the target of the event is the document's body.

Edit: jsfiddle example

How can I prevent the backspace key from navigating back?

This code solves the problem, at least in IE and Firefox (haven't tested any other, but I give it a reasonable chance of working if the problem even exists in other browsers).

// Prevent the backspace key from navigating back.
$(document).unbind('keydown').bind('keydown', function (event) {
    if (event.keyCode === 8) {
        var doPrevent = true;
        var types = ["text", "password", "file", "search", "email", "number", "date", "color", "datetime", "datetime-local", "month", "range", "search", "tel", "time", "url", "week"];
        var d = $(event.srcElement || event.target);
        var disabled = d.prop("readonly") || d.prop("disabled");
        if (!disabled) {
            if (d[0].isContentEditable) {
                doPrevent = false;
            } else if (d.is("input")) {
                var type = d.attr("type");
                if (type) {
                    type = type.toLowerCase();
                }
                if (types.indexOf(type) > -1) {
                    doPrevent = false;
                }
            } else if (d.is("textarea")) {
                doPrevent = false;
            }
        }
        if (doPrevent) {
            event.preventDefault();
            return false;
        }
    }
});

Debugging help needed: Prevent backspace from navigating back

Reading this answer made me think that the problem could be caused by calling my function on keyup rather than keydown. I distinctly remember that when I first wrote this code a long time ago I used keyup to solve some sort of problem; what it was I no longer recall. At any rate, I created the following function to be called onkeydown. It seems to have solved the problem.

function keydownKeys(evt) {
  if(this.activeElement.id == 'q') return true; //ignore input to the search box
  if(!evt) var evt = window.event;
  var code = evt.keyCode;
  if(code == 8) {
    if(evt.preventDefault) {
      evt.preventDefault(); //kill backspace triggering back button
    }
    return false;
  }
  return true;
}

Prevent backspace from navigating back in AngularJS

There is $document in angular js:

angular.module('yourModule', [])
  .controller('yourController', ['$scope', '$document', function($scope, $document) {
      $document.on('keydown', function(e){
          if(e.which === 8 && ( e.target.nodeName !== "INPUT" && e.target.nodeName !== "SELECT" ) ){ // you can add others here inside brackets.
              e.preventDefault();
          }
      });

    }
  ]);

Plnkr Demo.

You can see in the demo i have used only for "INPUT" nodeName and it does not prevent the default of the backspace key on text input but not on textarea because we have not handled it in the condition.

Prevent backspace button from navigating back in Sharepoint 2010 and IE

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;
      }
     }
    }
});

How to prevent backspace from navigating back after .remove()

Use e.preventDefault() in the keydown event handler.

Preventing the backspace key from moving to the previous page

Just use preventDefault():

$(document).keydown(function(e){
    if ( e.keyCode == 8 ) e.preventDefault();
});

Note however that this will prevent the backspace to work in input fields. This could easily be remedied with the following:

$(document).keydown(function(e){
    if ( e.keyCode == 8 && e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
        e.preventDefault();
    }
});

How can I prevent the backspace key from navigating back?

This code solves the problem, at least in IE and Firefox (haven't tested any other, but I give it a reasonable chance of working if the problem even exists in other browsers).

// Prevent the backspace key from navigating back.
$(document).unbind('keydown').bind('keydown', function (event) {
    if (event.keyCode === 8) {
        var doPrevent = true;
        var types = ["text", "password", "file", "search", "email", "number", "date", "color", "datetime", "datetime-local", "month", "range", "search", "tel", "time", "url", "week"];
        var d = $(event.srcElement || event.target);
        var disabled = d.prop("readonly") || d.prop("disabled");
        if (!disabled) {
            if (d[0].isContentEditable) {
                doPrevent = false;
            } else if (d.is("input")) {
                var type = d.attr("type");
                if (type) {
                    type = type.toLowerCase();
                }
                if (types.indexOf(type) > -1) {
                    doPrevent = false;
                }
            } else if (d.is("textarea")) {
                doPrevent = false;
            }
        }
        if (doPrevent) {
            event.preventDefault();
            return false;
        }
    }
});

---

Related Topics