Get deleted character from content of editable div

Question

I use the content editable div because I want to show emoticons selected by the user in the text area.

I want to know that character is deleted using the backspace or delete button.

Is it possible to recognize a character using jquery or javascript ?

UPDATE

This is not a duplicate at all, since all the answers relate to how to track the key pressed not in relation to the dropped character.

Answer 1

I do not have a clean solution. But this shows the remote char if you press 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

Answer 2

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

Here is an example using <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 is not deleted. Then you can see what the last character is and do the backspace operation yourself.

You will need to modify the above example to determine the current cursor position in order to delete the correct character, but this is the beginning.