可编辑的 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 事件，在这种情况下，我将跨度与非 ascii 字符和新键入的字符分开，并将它们放入新的跨度标签并替换旧标签。这适用于第一个“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

Answer 2

它实际上是 Firefox 中的错误，当 "" 嵌套在其他元素集 contenteditable "true" 中时，它会忽略删除和退格事件...

您可以通过此链接检查错误 :) https://bugzilla.mozilla.org/show_bug.cgi?id=685452

Answer 3

我得到了这个问题的解决方案，并想与你们分享，以便它可以帮助其他人。

添加到 rogelio 的解决方案，即使 span contenteditable="false"，我在每个突出显示 span 的末尾添加了 "Zero Width Space"("​")，从而解决了问题。

JS Fiddle For the Solution。

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

希望对你有所帮助。