Javascript 附加奇怪的行为

我有一些应用程序将元素添加到

contentEditable div

。 大概是这样的：

<div id="div" contentEditable="true"></div>
<button id='appendBtn'>append</button>

<style>
    .bracket {
      color: blue;
    }

    .template-content {
      color: green;
    }

    #div {
      border: solid 1px gray;
      margin-bottom: 10px;
    }
</style>

<script>
    function appendContent() {
      var content = "<span class='template-block'>" +
        "<span class='bracket'>{</span>" +
        "<span class='template-content'>param</span>" +
        "<span class='bracket'>}</span>" +
        "</span>";

        $("#div").append(content);
    }

    document.getElementById ("appendBtn").addEventListener ("click", appendContent, false);
</script>

解决方案是在上次关闭

span

标记后添加一个

。像这样：

var content = "<span class='template-block'>" +
        "<span class='bracket'>{</span>" +
        "<span class='template-content'>param</span>" +
        "<span class='bracket'>}</span>" +
        "</span>&nbsp;";

var content=“”+
"{" +
“参数”+
"}" +
" ";

---

但它带来了很多不需要的工作人员，我不得不在课后处理课文。如何解决这个问题？

这是内容可编辑的默认行为，将指针设置在最后一个字符后面。在您的情况下，指针已设置

<span class='bracket'>}--> pointer <--</span>

---

}-->指针我正在测试您的小提琴，它工作正常。你使用了什么浏览器？你到底想实现什么？nvm，有一个输入错误，他/她指的是“蓝色”而不是“绿色”。如果您继续键入，字体将保持蓝色，而不是默认为黑色，并且您仍然在最后一个span标记内写入。@FacundoLaRocca Fiddle演示了这个问题。单击“附加检查元素”并开始键入附加文本的末尾，您将看到新文本在范围内结束。OP希望新文本在span之外。即使
也不是一个解决方案，因为用户所要做的就是删除最后一个空格，以便在最后一个
中再次结束-问题是标记本身被忽略，而您在后面键入的字符就是文本结束的地方。您可能需要一个可能的脚本解决方案在按下键或向上键（尚未测试）时触发，以控制文本，确保文本保持在指定的模板内。谢谢。我所要做的就是
$.trim（$（“#div”））.text（）.replace（/[\u200B-\u200D\uFEFF]/g'，）
删除该符号并将数据发送到我的php脚本
<span class='bracket'>}--> pointer <--</span>