9

I am using a content editable div because i want to show emoticons selected by the user in the text area.

I want to know what character is deleted with backspace or delete button.

Is it possible to know the character with jquery or javascript?

UPDATE

This is not at all a duplicate, since all answer are about how to track a pressed key not about the delected character.

Hari krishnan
  • 2,060
  • 4
  • 18
  • 27
  • @Blazemonger i dont know whether this can be achieved? – Hari krishnan Apr 02 '13 at 15:24
  • You could try and capture the backspace button... [http://stackoverflow.com/questions/4935655/how-to-trap-the-backspace-key-using-jquery](http://stackoverflow.com/questions/4935655/how-to-trap-the-backspace-key-using-jquery) – Joseph Apr 02 '13 at 15:25
  • @Joseph i could only track the pressed key. But how do i get the deleted character – Hari krishnan Apr 02 '13 at 15:28
  • 1
    I don't know if there is a ready solution. You could compare the text after keyup with the one just before when `event.which==8` and then find the missing char. That's not pretty, though :( – Denys Séguret Apr 02 '13 at 15:29
  • @dystroy Please remove the duplicate link above my description because users seeing this question will get to wrong answer – Hari krishnan Apr 02 '13 at 15:35
  • @Hari krishnan One durty may would be to prevent the key from doing anything and use jQuery or JavaScript to manually delete the character that would have been removed. Thus you would then stored the deleted character via JavaScript. Make Sense? – Joseph Apr 02 '13 at 15:36
  • @Harikrishnan I'm not the one who linked to that other question. I can do nothing. – Denys Séguret Apr 02 '13 at 15:37
  • Please, people, read the question and comments before voting to close. This closing is ridiculous. – Denys Séguret Apr 03 '13 at 11:55

2 Answers2

3

I don't have a clean solution. But this one shows you the removed char if you hit the backspace key :

var lastText = $('#editable').text();
$('#editable').keyup(function(event){
  if (event.which==8 || event.which==46) {
     var newText =  $(this).text();
    for (var i=0; i<lastText.length-1; i++) {
      if (lastText[i]!=newText[i]) {
       console.log("char '" +  lastText[i] + "' was removed at index "+i);
        lastText = newText;
        return;
      }
    }
  }
});

Demonstration

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • This is exactly how I was thinking the problem would have to be approched. – Ryan Apr 02 '13 at 15:33
  • If you click the demo, and press backspace on the last character, it works - but if you then do any typing anywhere in the document, the next backspace will report the wrong character. – NibblyPig Apr 02 '13 at 16:24
  • @SLC I'm sorry but I can't reproduce your problem. – Denys Séguret Apr 02 '13 at 16:25
  • You only set `lastText = newText` if backspace is pressed. so if you type 'abc' at the start of the document, lastText and newText do not match. When you press backspace, it reports the wrong character. You need to set lastText = newText for every keypress event. – NibblyPig Apr 02 '13 at 17:00
0

You can use the preventDefault() function to do what you want.

Here is an example using a <textarea> but it should extend to any element:

http://jsfiddle.net/4dThe/

$('#txtArea').keydown(function(e) { 

    if (e.which == 8)
    {
     var value =   $(this).val();
     var lastchar = value.substring(value.length - 1);

        alert("Last character is: " + lastchar);
        $(this).val(value.substring(0, value.length - 1));
        e.preventDefault();
    }

});

The preventDefault() method blocks the backspace operation, so the last character isn't deleted. You can then see what the last character is, and perform the backspace operation yourself.

You'll need to alter the above example to detect the current cursor position to delete the correct character, but it's a start.

NibblyPig
  • 51,118
  • 72
  • 200
  • 356
  • 3
    And if the removed character isn't the last one ? – Denys Séguret Apr 02 '13 at 15:46
  • As I said in the last paragraph, I'm not doing all the work ;) – NibblyPig Apr 02 '13 at 15:47
  • 3
    Seriously... The only difficulty here was in finding *what* character is removed. – Denys Séguret Apr 02 '13 at 15:48
  • If that's the case, you really need to do exactly what I did, but replace the part where I just take the last character with some code that gets the current cursor position. And that's a separate question. If you want to attack my answer, then go ahead. Your answer involves iterating character by character through an entire document. If the text is a large document it will freeze the browser up. My solution however will be instant regardless of the size of the text. Also, your solution will not work properly due to quite a a large bug. – NibblyPig Apr 02 '13 at 16:23