HTML, CSS, JS - Contenteditable div with permanent leading content
<p>I have a <code>contenteditable</code> div, something like:</p>

<pre><code>&lt;div id="text" contenteditable="true"&gt;&lt;/div&gt;
</code></pre>

<p>What I would like is to place another div (or span, non-editable) at the start of <code>#text</code>, where the user cannot insert text before it, or even move the cursor before it.</p>

<p>I've tried variations of:</p>

<pre><code>&lt;div id="text" contenteditable="true"&gt;
    &lt;span class="lead" contenteditable="false"&gt;This is some leader&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>You can see a running version of this setup <a href="https://jsfiddle.net/9ntud4yx/" rel="nofollow noreferrer">here</a>.</p>

<p>One thing you'll notice is that I've inserted a blank character <code>&amp;#8203;</code> after the <code>&lt;/span&gt;</code>. Without it, the cursor (carrot) does not display properly - either in the wrong spot, or not at all.</p>

<p>I'm not sure why, but in the fiddle I've provided, you <em>cannot</em> delete (backspace) the <code>span</code> content. When I have this identical html running in my browser, from an HTML file, I <em>can</em> delete it. I would like the user to be able to delete it, if desired, but to not allow anything to be inserted in front of it. It should delete all at once - it's either there as a group (including the <code>&amp;#8203;</code>), or not at all. Hence the <code>contenteditable="false"</code>.</p>

<p><strong>EDIT 1</strong></p>

<p>It seems the non-deleting issue is purely the way the HTML is written. I've created a new post <a href="https://stackoverflow.com/questions/37129365/html-contenteditable-bizarre-behaviour-of-child-elements-and-not-whitespace">here</a> commenting on it. That problem is solved, but the larger issue here is still ripe for the taking!</p>

<p><strong>/EDIT 1</strong></p>

<p>The closest I've gotten, using JS, is something like:</p>

<pre><code>$('#testing').on('keyup', function(e){
    if($(this).html().indexOf(... leader ...) == 3){ // Needs to be 3, because the actual content of an editable div has markup in it

    }else{
        var splits = $(this).html().split(... leader ...);

        $(this).html(... leader ...);

        for(var i = 0; i &lt; splits.length; i++){
            $(this).append(splits[i]);
        }
    }
});
</code></pre>

<p>which you can see running <a href="https://jsfiddle.net/sqkpLjr7/4/" rel="nofollow noreferrer">here</a>.</p>

<p>What it does is checks to see if the desired bit is at the front. If not, it splits the content, and rearranges it so that the desired bit is back at the lead.</p>

<p>It's super buggy, has a lag after keyup, and prints the character before moving it around. It also doesn't work for the desired <code>&lt;span&gt;</code> element previously discussed, and also keeps the cursor at the start of the input field if it began there.</p>

<p>Sorry if I've presented it confusingly. I'm trying to think of a service that offers the same functionality, but can't think of any off the top of my head. FaceBook has something <em>similar</em>, when you type a friend's name into a comment box, but the content is editable and can be anywhere in the input. Shown below:</p>

<p><a href="https://i.stack.imgur.com/9oxdk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9oxdk.png" alt="FB leading"></a></p>

<p><a href="https://i.stack.imgur.com/1bggG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1bggG.png" alt="FB middle"></a></p>

<p>Thoughts? Anything to get me in the right direction is welcome! </p>