Prevent transition from going backward in AngularJS

Question

I ran into this problem in my AngularJS web browser.

When the user enters a page with a fillable form, and he begins to print, if he presses the backspace key, and the focus is not on the input text, the page goes back to the previous state.

I searched for this solution using jQuery, but this does not seem to be a suitable way to achieve this in AngularJS.

Answer 1

Angular has $document 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(); } }); } ]); 

Demo version of Plnkr.

You can see in the demo that I used only for "INPUT" nodeName, and this does not interfere with the backspace keyword by default when entering text, but not on textarea , because we did not process it in state.

Answer 2

I cannot comment on the “accepted answer”, but it will not work as the condition

 e.which === 8 && e.target.nodeName !== "INPUT" || e.target.nodeName !== "SELECT" 

with a logical error so you can use

 e.which === 8 && e.target.nodeName !== "INPUT" && e.target.nodeName !== "SELECT" 

or the answer posted by @ThisIsMarkSantiago.

Answer 3

Add below script to controller

 var rx = /INPUT|SELECT|TEXTAREA/i; $document.on("keydown keypress", function(e){ if( e.which == 8 ){ // 8 == backspace if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){ e.preventDefault(); } } }); 

Or you can use jQuery

  $(function(){ var regx = /INPUT|SELECT|TEXTAREA/i; $(document).bind("keydown keypress", function(e){ if( e.which == 8 ){ // 8 == backspace if(!regx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){ e.preventDefault(); } } }); }); 

Answer 4

I got this answer here: How to disable the backspace key on all browsers?

 $(document).keydown(function(e) { var nodeName = e.target.nodeName.toLowerCase(); if (e.which === 8) { if ((nodeName === 'input' && e.target.type === 'text') || nodeName === 'textarea') { // do nothing } else { e.preventDefault(); } } }); 

Just put it in your controller.