Is there a way to prevent backspace navigation in whole angular 2/4/5 web application?

I need to restrict the backspace navigation within my whole app.Are there any solutions i.e something that I can perform under a single tile for my whole app ?

I am working on Angular 6 application and was facing same issue on Internet Explorer (IE).

I was searching the solution on internet then I found one solution in JQuery. Somehow I managed to convert it in Angular.

This snippet resolved the issue.

@HostListener('document:keydown', ['$event'])
  onKeyDown(evt: KeyboardEvent) {
    if (
        evt.keyCode === 8 || evt.which === 8
    ) {
      let doPrevent = true;
      const types =['text','password','file','search','email','number','date','color','datetime','datetime-local','month','range','search','tel','time','url','week'];
      const target = (<HTMLInputElement>evt.target);

  const disabled = target.disabled || (<HTMLInputElement>event.target).readOnly;
  if (!disabled) {
    if (target.isContentEditable) {
      doPrevent = false;
    } else if (target.nodeName === 'INPUT') {
      let type = target.type;
      if (type) {
        type = type.toLowerCase();
      }
      if (types.indexOf(type) > -1) {
        doPrevent = false;
      }
    } else if (target.nodeName === 'TEXTAREA') {
      doPrevent = false;
    }
  }
  if (doPrevent) {
    evt.preventDefault();
    return false;
  }
  }
  }

How can I prevent the backspace key from navigating back?, EDIT: The reason I do this is that I'm not creating a simple web page but a large application. It is incredibly annoying to lose 10 minutes of work just because you​  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 share | improve this answer

The solution LokiSinclair proposed for AngularJS should be adjustable to work with Angular 5 as well. The basic solution just prevents the key event, therefore you could enter a HostListener to your AppComponent which handles this globally:

@HostListener('document:keydown', ['$event'])
onKeyDown(evt: KeyboardEvent) {
  if (
    evt.which === 8 && 
    ( evt.target.nodeName !== "INPUT" && evt.target.nodeName !== "SELECT" ) 
  ) { 
    evt.preventDefault();
  }
}

Credits to Prevent backspace from navigating back in AngularJS for the general logic, just translated it to the Angular 5 utilities.

How to disable Browser back button in Angular 2, I'm developing a web site using Angular 2. in app.component.ts import { LocationStrategy } from setBackClicked(true); return false; }); } } // in navigation guard However, I don't think there's a way to cancel or disable default browser Good it working .. if i press keyboard backspace – SHUBHASIS  All you have to do is include this index.js file from this repo. No need to actually make the module a requirement as it will automatically disable backspace navigation. npm install --save angular-disable-backspace-navigation bower install --save angular-disable-backspace-navigation

With Router Guards we can prevent users from accessing areas that they’re not allowed to access, or, we can ask them for confirmation when leaving a certain area.To control whether the user can navigate to or away from a given route, use these route guards.

You can use any of these two:

CanActivate Checks to see if a user can visit a route.

CanDeactivate Checks to see if a user can exit a route.

Here your preference is not to allow to to go back. I have used for a login condition. I am giving my sample code to you. It may help you.

       import { Injectable } from '@angular/core';
      import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
      import { AuthenticateService } from '../authenticate.service';
      import { Observable } from 'rxjs';

      @Injectable({
        providedIn: 'root'
      })
      export class LoginAuthService implements CanActivate {

        constructor(
          private checkLogin: AuthenticateService,
          private router: Router) { }
        canActivate(
          route: ActivatedRouteSnapshot,
          state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
            // This isLoggedIn flag is set when the token is found after login
            if (!this.checkLogin.isLoggednIn()) {                 
              return true;
            } else {
              this.router.navigate(['/componentOfMyChoice']);
            }

        }
      }

Then I used it in the routing like this

    { path: 'login', component: LoginComponent , canActivate: [LoginAuthService]},

So when a user is logged in you cannot go back to the login page until and unless you get logged out. Hope it will help you

Prevent backspace in a dropdown from acting as the back button , Don't let hitting backspace in a dropdown cause a back navigation! Like every other website we use cookies. Application Lifecycle> This is a simple way to prevent users from accidentally browsing backwards when hitting the backspace key in a SELECT element. Now, let's see the entire page! Delegating navigation interruption to your controllers. Angular gives you that wonderful function to implement with your own logic. For the angular app I'm developing at theScore (hey, we're hiring Android and iOS people!), I needed a way to stop a user from navigating away from a form that they had modified (a dirty form).

Preventing backspace from navigating back in all the browsers , This entry was posted in JavaScript, Web 2.0 and tagged backspace, chrome, event model, Firefox, IE, navigation back, prevent, safari,  Wrap Up. In order to keep the user from losing data, due to navigation changed within the Angular app or in the browser level (like close/refresh), we need to create a generic component to handle

Angular 4 input prevent characters, How can I add to the existing onKeyUp function to prevent commas from being of the input: Prevent manual entry Each time a character is entered, the whole input is an angular website. shift, alt, tab, backspace and command ( meta), but it also works AngularJS is a web application framework designed to simplify rich  The most difficult aspect about Angular 4 is that the whole application architecture has changed. Even though I thought I was pretty good with Angular 1.x, It was still a little difficult for me to get started. The focus of this tutorial is about how to setup a basic Angular 4 application for page navigation.

angular-disable-backspace-navigation, Miss any of our Open RFC calls?Watch the recordings here! » angular-disable-​backspace-navigation. 1.0.1 • Public • Published 4 years ago. Disable Backspace as Back Button in Firefox Mozilla deserves kudos for offering a backspace disabling option in the browser itself. No third-party apps or plug-ins needed.

Comments
  • Possible duplicate of Prevent backspace from navigating back in AngularJS
  • @LokiSinclair it is not duplicate becuse of this question is related to angular2/4/5 not for angularjs.
  • But it is a duplicate of this, which has an answer - use canDeactivate guard. stackoverflow.com/questions/36357204/…
  • @Shiv the solution may be slightly different, but the problem is the same. Adapt the solution to work in Angular5 = Profit!
  • Very helpful, thank you. The only thing I changed in my implementation is removed keyCode and which references, because they are both deprecated. Instead, I'm checking if $event.key == 'Backspace'.
  • Nice one, It really works for me. I found the above mentioned issue in Firefox