Div being edited does not fire KeyUp / Highliting Delete event

i using an editable div,

<div class="editableDiv"  contenteditable="true">
   sdtgssdrsdrtyy ╚asasasarrstssdertrtyrtyrrty ☻aaaaaaaaaaaaaaaaadaafsdsf4n


I have a task to show nonascii characters to the user, so that hilight nonascii characters I used hilighting jquery library, which extracts nonascii characters by adding a span with the "hilight" class. innerHTML looks like this:

<span class="highlight">╚</span>asasasarrstssdertrtyrtyrrty
<span class="highlight">☻</span>aaaaaaaaaaaaaadaafsdsf4n


The highlighting works well, but there is only a problem: when the user removes the nonascii characters and starts typing from that position, the characters being typed also become hightighted, when I checked the innerHTML, it shows that the characters just typed also fell into the gap as it should ...

<span class="highlight">☻aaa</span>aaaaaaaaaaaaaadaafsdsf4n


To solve this, I used the KeyUp event on the div being edited, in which case I split the range with nonascii and new typed characters and put them in a new span tag and copy the old one. This works well for the first key and the newly entered characters are also not highlighted, but after that, when I type text, this event does not fire.

I have no clue what is causing this? Is this because I explicitly changed the innerHTML div? Please, help.....

Following is the keyup function ....

$(document).on('keyup', ".editableDiv", function () {

        var hilighterSpans = $(this).children(".highlight");

        hilighterSpans.each(function (x, y) {

            var spanText = $(y).text().trim();

            if (spanText == "") {
            else {

                var regex = new RegExp("[^\u0020-\u007E]+");
                var nonasciiChar = regex.exec(spanText);

                if (nonasciiChar != "") {

                    var asciiChars = spanText.replace(nonasciiChar, '');

                    var spannode1 = document.createElement('span');

                    var spannode2 = document.createElement('span');
                    spannode2.className = 'highlight';

                    if (spanText.indexOf(nonasciiChar) == 0) {
                    else {




Replaced innerHTML as follows:

<span><span class="highlight"></span>assd</span>
<span><span class="highlight"></span>aaa</span>


Could this be a problem?

JSFiddle for this issue

I JSFiddle try to enter text to the right of the highlighted nonascii character ..... I want the new typed characters to be immeasurable .... currently for the first input it works fine (although the new typed characters have changed positions, have to search for that) ... but if typed again the code doesn't work (keyup event doesn't fire) ...


source to share

3 answers

I got a solution to this problem and decided to share it with you to help other people.

Adding to rogelio solutiuon, i.e. creating a span contenteditable = "false", I added a " Zero Width Space " ("& # 8203") at the end of each highlight interval, which solved the problem.

JS Fiddle for solution .

    <div class="editableDiv"  contenteditable="true">sdtgssdrsdrtyy
<span class="highlight" contenteditable="false">╚</span>&#8203;asasasarrstssdertrtyrtyrrty
<span class="highlight" contenteditable="false">☻</span>&#8203;aaaaaaaaaaaaaadaafsdsf4n</div>


Hope this helps you.



The problem is that the inner range is .highlight

also editable.

You need to set spannode2

to contenteditable="false"

, add this line after element creation spannode2


spannode2.setAttribute('contenteditable', 'false');


Make sure the initial is .highlight

set to contenteditable="false"


In short, the entire .highlight

span must have contenteditable="false"


See the jsfiddle



it's actually a bug in firefox that ignores the delete and backspace event when a "<span>" is nested inside another element set contenteditable "true" ...

you can check the bug via this link :)



All Articles