javascript - 可编辑 Div 未触发 "KeyUp"事件/删除突出显示

Question

我正在使用可编辑的 div:

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

我的任务是向用户显示非 ascii 字符，以突出显示非 ascii 字符我使用了突出显示 jQuery 库，它通过添加带有“highlight”类的 span 来突出显示非 ascii 字符。 innerHTML 如下:

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

突出显示效果很好，但唯一的问题是，当用户删除非 ascii 字符并从该位置开始输入时，输入的字符也会突出显示，当我检查 innerHTML 时，它显示新输入的字符也进入了范围标记如下:

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

为了解决这个问题，我在可编辑的 div 上使用了 KeyUp 事件，在这个事件中，我将 span 与非 ascii 字符和新输入的字符分开，并将它们放入新的 span 标签中并替换旧的。这对于第一个 ``keyup` 工作正常，新输入的字符也没有突出显示，但之后当我再次键入时，此事件不会触发。

我不知道是什么原因造成的？这是因为我明确地更改了 div 的 innerHTML 吗？请帮忙。

以下是keyup函数:

$(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 for this problem

我 JSFiddle 尝试从突出显示的非 ascii 字符直接输入......我希望新输入的字符不突出显示......目前对于第一次输入它工作正常(尽管新输入的字符改变了位置，将有看看这个)...但是如果再次输入代码将不起作用(keyup 事件不会启动)...

Answer 1

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

您需要将 spannode2 设置为 contenteditable="false"，在创建 spannode2 元素后添加此行。

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

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

简而言之，所有.highlight span都必须有contenteditable="false"。

参见 jsfiddle