CODEWITHSUNDEEP
javascriptangularjs
dev
dev

Reputation: 313

Is there a way to prevent backspace navigation in whole angularjs web application?

I need to restrict backspace navigation in my whole app.Is there any solution i.e smething that i can do at one place for my whole app ?

Upvotes: 0

Views: 810

Answers (3)

Martin
Martin

Reputation: 16292

This is the proper way:

preventNavigate.$inject = ['$window'];
function preventNavigate($window) {
    return {
        restrict: 'A',
        link: function() {
            $window.onbeforeunload = function() { 
               return "Are you sure you want to leave?"; 
            }
        }
    }
}

app.directive('preventNavigate', preventNavigate);

Then on your index.html after your ng-app include the attribute prevent-navigate;

<body ng-app="app" prevent-navigate>

Upvotes: 1

E. Abrakov
E. Abrakov

Reputation: 463

You can create the keypress event directive like this and in the event callback you can e.preventDefault(); if key pressed is backspace.

Upvotes: 0

Tirthraj Barot
Tirthraj Barot

Reputation: 2679

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

    }
  ]);

It would prevent backspace navigation except for if any input tag is active.

We have not handled it for the textarea so it wouldn't allow backspace on textarea.

Here is the demo http://plnkr.co/edit/ZXtiJNI0a73c0SwIQ7mI?p=preview

Upvotes: 1

Related Questions