javascript - 附加奇怪的行为

Question

我有一些应用程序将元素添加到 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>

我在 jsfiddle 中写了一个工作示例.

问题是，当我单击append并在添加元素后继续键入时，所有下一个文本都会变成绿色。发生这种情况是因为所有接下来的文本都会传递到最后一个 span 标记(属于绿色的 bracket 类)...

<span class="bracket">}some text</span>

解决方案是在最后一个结束 span 标记后添加一个  。像这样:

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

但是它带来了很多不需要的人员，我必须处理之后的文本。我该如何解决这个问题？

Answer 1

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

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

您可以尝试使用 ​ 实体(零宽度空间)解决方法 如果您不想要