可编辑Div不会触发"KeyUp"事件/删除Highliting

Question

我使用可编辑的div,

<div class="editableDiv"  contenteditable="true">
   sdtgssdrsdrtyy ?asasasarrstssdertrtyrtyrrty ?aaaaaaaaaaaaaaaaadaafsdsf4n
</div>

我有任务向用户显示nonascii字符,hilight nonascii字符我使用了hilighting jquery库,通过添加带有"hilight"类的span来突出显示nonascii字符.innerHTML如下......

<span class="highlight">?</span>asasasarrstssdertrtyrtyrrty
<span class="highlight">?</span>aaaaaaaaaaaaaadaafsdsf4n

突出显示效果很好,但只出现问题是当用户删除nonascii字符并从该位置开始输入时,键入的字符也会变为高亮,当我检查innerHTML时,它显示新键入的字符也进入span标记,如下所示. .

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

为了解决这个问题,我在可编辑的div上使用了"KeyUp"事件,在这种情况下,我使用nonascii字符和新类型的字符分隔并将它们放入新的span标记并重新复制旧的.这适用于第一个密钥并且新输入的字符也没有突出显示但在此之后当我再次键入时,此事件不会触发.

我不知道导致这个的原因是什么？这是因为我明确改变了div的innerHTML吗？请帮助.....

以下是键盘功能....

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

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

        hilighterSpans.each(function (x, y) {

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

            if (spanText == "") {
                $(y).remove();
            }
            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';
                    spannode2.innerHTML=nonasciiChar;

                    if (spanText.indexOf(nonasciiChar) == 0) {
                        $(spannode1).append(spannode2);
                        $(spannode1).append(asciiChars);                        
                    }
                    else {
                        $(spannode1).append(asciiChars);
                        $(spannode1).append(spannode2);                        
                    }

                    $(this).replaceWith(spannode1);
                }
            }
        });    

    });

替换innerHTML如下...

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

这可能导致问题吗？

JSFiddle解决这个问题

我JSFiddle尝试从突出显示的nonascii字符输入正确.....我希望新的类型字符无法突出....目前第一次打字它工作正常(虽然新的类型字符改变位置,将不得不查看这个)...但如果再次键入代码不起作用(键盘事件不会启动)...

Answer 1

问题是因为内部.highlight跨度也是可编辑的.

您需要设置spannode2to contenteditable="false",在创建spannode2元素后添加此行.

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

确保初始.highlight设置为contenteditable="false".

简而言之,所有.highlight跨度都必须具备contenteditable="false".

看到jsfiddle