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>

您可以尝试使用实体（零宽度空间）的变通方法如果你不想要 

追加奇怪的行为

1 个答案: