Javascript “可编辑分区不点火”；KeyUp“；事件/删除突出显示

我正在使用可编辑的div：

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

替换的innerHTML如下所示：

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

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

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

╚助理
☻aaa

这会引起问题吗

---

我尝试直接从突出显示的非ascii字符中键入。。。。。我希望新键入的字符不高亮显示。。。。目前，对于第一次键入，它可以正常工作（尽管新键入的字符改变了位置，但必须注意这一点）。。。但是，如果再次键入，代码将不起作用（

keyup

事件不会启动）.

问题在于内部的

。突出显示
span也是可编辑的

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

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

确保初始的
.highlight
设置为
contenteditable=“false”

简而言之，所有的
.highlight
span必须具有
contenteditable=“false”

请参阅
当“”嵌套在其他元素集合contenteditable“true”中时，实际上是firefox中忽略删除和退格事件的错误

您可以通过以下链接检查错误：）
我找到了这个问题的解决方案，并想与大家分享，这样可以帮助其他人

在rogelio的解决方案中，即使span contenteditable=“false”，我在每个突出显示span的末尾添加了“”（“​”），从而解决了问题


sdtgssdrsdry
╚​ASASASASARRSTSDRTRTYRRTY
☻​aaaaaaaaaaaaaadaafsdsf4n

我希望这会对您有所帮助。
如果内存有限，您需要为某些浏览器的div添加一个
tabindex
属性来触发这些事件。您是否检查了控制台中的错误？问题似乎不在于
keyup
或任何事件。这是关于突出显示添加元素的问题，如果用户更改突出显示的文本，您需要删除这些元素。@MelanciaUK：是的，我正在做同样的事情……如果用户删除突出显示的nonascii字符，我将删除整个范围……但是如果他尝试在不删除突出显示字符的情况下键入，我将新键入的字符与突出显示的非SCII字符分开，这样他就不会看到新键入的字符突出显示。。。这对第一次键控有效…但是在那之后如果我尝试键入事件没有触发…你能创建一个
jsFiddle
让我们看到它工作吗？我必须看看这是否可以实现…因为突出显示的范围是由第三方jquery库创建的…我将尝试这个…谢谢你的回复：）无论如何，你可以这样做
$（'.highlight'）.attr（'contenteditable'，'false'））
在插件创建span之后。我在IE中遇到问题，当我在突出显示的span文本后单击span不可编辑时，光标自动向前移动，并且不允许我删除内容。它在Chrome中工作正常…请告知我无法在IE上测试。但在firefox中也会出现类似情况。我没有o在突出显示的字符后单击下一个字符，但我还不知道如何修复它。解决方案是什么…IEup中的情况与您找到的解决方案相同，但尝试复制和粘贴ASCI字符，然后从旁边开始键入ASCI字符。它将突出显示我键入的所有字符…您有解决方案吗？！
spannode2.setAttribute('contenteditable', 'false');

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