CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Daria
Daria

Reputation: 861

append strange behaviour

I have some application that adds elements to contentEditable div. Something like this:

<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>

I wrote a working example in jsfiddle.

The problem is that when I click append and continue typing after added element all next text comes green. It happens because all next text pasts into last span tag (of class bracket with green color)... 

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

The solution is adding a &nbsp; after last closing span tag. Like this:

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

But it brings a lot of unwanted staff I have to do with the text after. How can I solve this?

Upvotes: 2

Views: 118

Answers (1)

Sebastian Krysiak
Sebastian Krysiak

Reputation: 911

Thats a default behaviour of content editable setting the pointer behind the last character inside. In Your case the pointer is set 

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

You could try a workaround with &#8203; entity (zero width space) if you dont want the &nbsp;

Upvotes: 4

Related Questions