7

I faced this issue in my AngularJS webapp.

When a user enters a page with a form to fill and he starts typing, if he presses the backspace key and the focus is not on the input text, then the page goes to the previous state.

I looked up this solution using jQuery, but it doesn't seem the appropiate way for achieve this in AngularJS.

Community
  • 1
  • 1
gyss
  • 1,753
  • 4
  • 23
  • 31

4 Answers4

9

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.

shak
  • 641
  • 9
  • 13
Jai
  • 74,255
  • 12
  • 74
  • 103
  • @seb how come is that *elementary error*? frankly speaking this is just for backspace and anyone elem whether it is input or select. – Jai Aug 22 '15 at 10:50
  • @seb just curious to know is there anything in a webpage where you can focus two elements at same time, because afaik not possible. So using `&&` fails. – Jai Aug 22 '15 at 15:10
  • 1
    See Tolya's answer. e.which === 8 && e.target.nodeName !== "INPUT" || e.target.nodeName !== "SELECT" is equivalent to (e.which === 8 && e.target.nodeName !== "INPUT") || e.target.nodeName !== "SELECT", so it is true whatever the key pressed if e.target.nodeName !== "SELECT. – Seb Aug 23 '15 at 12:05
  • you should consider editable tags also in if condition. if (e.which === 8 && !e.target.isContentEditable && (!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly)) { e.preventDefault(); } – SajithK Jul 29 '16 at 11:56
9

I can't comment "accepted answer", but it will work not right, as condition 

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

with logic error, so you can use

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

or answer that wrote @ThisIsMarkSantiago.

2

Add the below script in your 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();
              }
          }
      });
  });
Libu Mathew
  • 2,976
  • 23
  • 30
0

I got this answer here: How can I disabling backspace key press 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 inside your controller.

Community
  • 1
  • 1
Mark Santiago
  • 453
  • 3
  • 9
  • It seems a pretty neat solution. But I've already got it working with jQuery. The idea is to solve this using AngularJS, if it's possible... – gyss Mar 12 '15 at 09:45
  • angular internally uses jqLite. Nonetheless for this you just need to write javascript. – Jai Mar 12 '15 at 09:47
  • 1
    I can't backspace on password field, and I don't know the === operator. I fix it with: if ((nodeName == 'input' && (e.target.type == 'text' || e.target.type == 'password')) || nodeName == 'textarea') { – Diego Apr 07 '16 at 18:02