Getting Deleted character

Question

in in Input field, if the user presses Backspace or Delete key, is there a way to get the deleted character.

I need to check it against a RegExp.

you may attach a *keyup* handler and wait for the backspace character, prevent default action, do the removal yourself but before that you know what is the last character so you can do the regex. — gblazex, Jul 06 '10 at 10:19

score 9 · Answer 1 · edited Jul 29 '20 at 08:32

9

Assuming the input box has an id 'input'. Here is how with least amount of code you can find out the last character from the input box.

document.getElementById("input").onkeydown = function(evt) {
  const t = evt.target;
  if (evt.keyCode === 8) { // for backspace key
    console.log(t.value[t.selectionStart - 1]);
  } else if (evt.keyCode === 46) { // for delete key
    console.log(t.value[t.selectionStart]);
  }
};

<input id="input" />

edited Jul 29 '20 at 08:32

Sasha Kondrashov

4,038
1
18
29

answered Jul 28 '20 at 20:48

Akshay Mittal

101
1
4

1

thank you for your answer Akshay, it seems to be a really good one! please refrain from asking for upvotes, as if everyone did that, it would really detract from the stackoverflow experience, but I hope you keep answering questions all the same :) – Sasha Kondrashov Jul 29 '20 at 00:05
This is an elegant solution – Michael S Apr 01 '22 at 20:11
This solution actually gave me an idea... – Olu Adeyemo May 01 '22 at 07:52

score 8 · Accepted Answer · edited May 23 '17 at 10:33

The following will work in all major browsers for text <input> elements. It shouldn't be used for <textarea> elements because the getInputSelection function doesn't account for line breaks correctly in IE. See this answer for a (longer) function that will do this.

function getInputSelection(input) {
    var start = 0, end = 0;
    input.focus();
    if (    typeof input.selectionStart == "number" &&
            typeof input.selectionEnd == "number") {

        start = input.selectionStart;
        end = input.selectionEnd;
    } else if (document.selection && document.selection.createRange) {
        var range = document.selection.createRange();
        if (range) {
            var inputRange = input.createTextRange();
            var workingRange = inputRange.duplicate();
            var bookmark = range.getBookmark();
            inputRange.moveToBookmark(bookmark);
            workingRange.setEndPoint("EndToEnd", inputRange);
            end = workingRange.text.length;
            workingRange.setEndPoint("EndToStart", inputRange);
            start = workingRange.text.length;
        }
    }
    return {
        start: start,
        end: end,
        length: end - start
    };
}

document.getElementById("aTextBox").onkeydown = function(evt) {
    evt = evt || window.event;
    var keyCode = evt.keyCode;
    var deleteKey = (keyCode == 46), backspaceKey = (keyCode == 8);
    var sel, deletedText, val;
    if (deleteKey || backspaceKey) {
        val = this.value;
        sel = getInputSelection(this);
        if (sel.length) {
            deletedText = val.slice(sel.start, sel.end);
        } else {
            deletedText = val.charAt(deleteKey ? sel.start : sel.start - 1);
        }
        alert("About to be deleted: " + deletedText);
    }
};

I am getting error at input.createTextRange. object doesn't support this property or method. — dIvYaNsH sInGh, Sep 08 '16 at 12:48
@dIvYaNsHsInGh: That must mean the object you're passing in isn't an input/textarea element. — Tim Down, Sep 08 '16 at 15:27

score 3 · Answer 3 · answered Jul 06 '10 at 09:48

No, there is no variable that stores the deleted char. Unless you have a history for Undo/Redo, but it would be difficult to get the information out of that component.

Easiest would be to compare the contents of the input field before and after delete/backspace have been pressed.

score 3 · Answer 4 · answered Jul 06 '10 at 10:14

3

You could try something with the caret position:

function getCaretPosition(control){
  var position = {};
  if (control.selectionStart && control.selectionEnd){
    position.start = control.selectionStart;
    position.end = control.selectionEnd;
  } else {
    var range = document.selection.createRange();
    position.start = (range.offsetLeft - 1) / 7;
    position.end = position.start + (range.text.length);
  }

  position.length = position.end - position.start;
  return position;
}

document.getElementById('test').onkeydown = function(e){
  var selection = getCaretPosition(this);
  var val = this.value;

  if((e.keyCode==8 || e.keyCode==46) && selection.start!==selection.end){
    alert(val.substr(selection.start, selection.length));
  } else if(e.keyCode==8){
    alert(val.substr(selection.start-1, 1));
  } else if(e.keyCode==46){
    alert(val.substr(selection.start, 1));
  }
}

Tested on Chrome 6. See jsFiddle for an example

answered Jul 06 '10 at 10:14

Harmen

22,092
4
54
76

1

Care to explain `(range.offsetLeft - 1) / 7;`? – Tim Down Jul 06 '10 at 10:23
Err, I have no idea, I searched for a caret position function on Google – Harmen Jul 06 '10 at 10:27
The caret position function is dodgy. Not just for that line, whose purpose is beyond me, but for the test for `control.selectionStart && control.selectionEnd`: this will return false if both are 0, which is not good and will cause errors in non-IE browsers. – Tim Down Jul 06 '10 at 10:45
The IE code here seems to be relying on the size of each character being exactly seven pixels, and the edge of the input being at 0 inside the `offsetParent`. This is almost-comically unlikely to hold true. Reading the selection/caret position in IE is frustratingly difficult (see Tim's previous posts!) but this way is a non-starter. – bobince Jul 06 '10 at 10:58
There's also a missing line for retrieving the event object in IE in the `keydown` handler. `e = e || window.event;` would do it. – Tim Down Jul 06 '10 at 11:23

Getting Deleted character

4 Answers4

Linked

Related