AngularJS -- See which character was deleted by the backspace or delete key without comparing

Question

I am creating an application that needs to take user input from a text input. If, at any point, the character that was inputted was incorrect (ie: a number when it should only be a-z), the input box will become invalid. I then take that character and place it in an array of "bad characters" that are in the input. The input box should become valid again if the character is deleted.

I am aware that I can take the input with every new key press and check that, but then that is going through each character to make sure it is allowed. I am curious if there is anyway to see what character was deleted with a backspace press.

I cannot post my code, I'm sorry.

I am using ng-keydown and mg-model in html. When the confirm button is pressed, the input should be valid from the ng-model.

Thanks -- I am teaching myself Angularjs, so I am not the best with it yet.

Might be related: https://stackoverflow.com/questions/4843472/javascript-listener-keypress-doesnt-detect-backspace — Reactgular, Jul 17 '18 at 23:38
You should be able to do this with the form validation functions. https://angular.io/guide/form-validation there shouldn't be the need to track what keys are pressed. Maybe a regular expression as a validation rule is all you need. — Reactgular, Jul 17 '18 at 23:42
Sorry, here is the AngularJS reference: https://docs.angularjs.org/guide/forms#custom-validation — Reactgular, Jul 17 '18 at 23:43
I will play around with this, but I don't believe that this will work with how I am writing this and what needs to be done. It's hard to explain because I can't say much. Thanks, though! — Jake, Jul 18 '18 at 00:14

score 1 · Accepted Answer · answered Jul 18 '18 at 06:25

To get the deleted characters you can use plain old javascript:

var caret_get_position = function(element){
    var pos    = 0;
    var posEnd = 0;
    if('selectionStart' in element){
        pos    = element.selectionStart;
        posEnd = element.selectionEnd;
    }else if('selection' in document){
        element.focus();
        var Sel       = document.selection.createRange();
        var SelLength = document.selection.createRange().text.length;
        Sel.moveStart('character', -element.value.length);
        pos    = Sel.text.length-SelLength;
        posEnd = Sel.text.length;
    }
    // return both selection start and end;
    return [pos, posEnd];
};
//get deletet character
element.addEventListener('keydown', function(event){
    var keycode      = ('which' in event)?event.which:event.keyCode;
    caret_positions  = caret_get_position(element);
    var val = this.value;
    if(keycode == 8){
        if(caret_positions[0] == caret_positions[1]){
            if(caret_positions[0] == 0){
                deleted = '';
            }else{
                deleted = val.substr(caret_positions[0]-1, 1);
            }

        }else{
            deleted = val.substring(caret_positions[0], caret_positions[1]);
        }
    }else if(keycode == 46){
        if(caret_positions[0] == caret_positions[1]){
            if(caret_positions[0] === val.length){
                deleted = '';
            }else{
                deleted = val.substr(caret_positions[0], 1);
            }
        }else{
            deleted = val.substring(caret_positions[0], caret_positions[1]);
        }
    }
});

So the hell am i doing here:

caret_get_position is pretty much self-explanatory. It will get the current position of the caret (the blinking line in your inputfield). Even with a selected range (this blue stuff) if you select more than one character.

In the keydown event it will check the pressed key and some more checks where the caret is. In the end the deleted characters are in the variable deleted. This is from my code so you need to adjust it for your needs.

AngularJS -- See which character was deleted by the backspace or delete key without comparing

1 Answers1