Question

我使用可编辑的div，

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

我有任务向用户显示nonascii字符，hilight我使用了hilighting jquery库的nonascii字符，它通过添加＆＃34; hilight＆＃34;来突出显示nonascii字符。类。 innerHTML如下......

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

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

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

为了解决这个问题，我使用了＆＃34; KeyUp＆＃34;关于可编辑div的事件，在这个事件中，我用nonascii字符和新打字的字符分隔，并将它们放入新的span标签并重新翻译旧的。这适用于第一个keyup，而新输入的字符也没有＆＃39;有突出显示，但在此之后，当我再次打字时，此事件不会触发。

我不知道造成这种情况的原因是什么？这是因为我明确地改变了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 for this problem

我JSFiddle尝试从突出显示的nonascii字符右键输入.....我希望新打字的字符不被突出显示....目前第一次打字它工作正常（虽然新的打字字符改变了位置，将不得不看在这个...）但如果再次键入代码不起作用（键盘事件不会启动）......

Answer 1

问题是因为内部.highlight范围也是可编辑的。

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

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

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

简而言之，.highlight范围内的所有内容都必须为contenteditable="false"。

请参阅jsfiddle

Answer 2

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

添加到rogelio的解决方案，即制作span contenteditable =“false”，我在每个突出显示跨度的末尾添加了“Zero Width Space”（“＆amp;＃8203”），这解决了这个问题。

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>

我希望这会对你有所帮助。

Answer 3

实际上，当“＆lt; span＆gt;”时忽略了删除和退格事件，这实际上是firefox中的错误嵌套在其他元素集中，满足“true”......

你可以通过这个链接查看bug :) https://bugzilla.mozilla.org/show_bug.cgi?id=685452

可编辑的Div未触发＆＃34; KeyUp＃34;事件/删除突出显示

3 个答案: