javascript - HTML、CSS、JS - 具有永久领先内容的 Contenteditable div

Question

我有一个 contenteditable div，类似于:

<div id="text" contenteditable="true"></div>

我想要的是在 #text 的开头放置另一个 div(或 span，不可编辑) ，用户不能在它之前插入文本，甚至不能在它之前移动光标。

我试过以下变体:

<div id="text" contenteditable="true">
    <span class="lead" contenteditable="false">This is some leader</span>
</div>

您可以看到此设置的运行版本 here .

您会注意到我插入了一个空白字符 ​在</span>之后.没有它，光标(胡萝卜)将无法正确显示 - 要么在错误的位置，要么根本不显示。

我不确定为什么，但在我提供的 fiddle 中，您不能删除(退格)span内容。当我在浏览器中运行来自 HTML 文件的相同 html 时，我可以将其删除。如果需要，我希望用户能够删除它，但不允许在它前面插入任何内容。它应该一次全部删除 - 它要么作为一个组存在(包括 ​ )，要么根本不存在。因此 contenteditable="false" .

编辑 1

看来不删除问题纯粹是 HTML 的编写方式。我创建了一个新帖子 here评论它。这个问题已经解决了，但这里更大的问题还没有解决!

/编辑 1

我得到的最接近的，使用 JS，是这样的:

$('#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 < splits.length; i++){
            $(this).append(splits[i]);
        }
    }
});

你可以看到它正在运行 here .

它所做的是检查所需的位是否在前面。如果不是，它会拆分内容并重新排列，以便所需的位回到开头。

它有很多问题，在按下键盘后有延迟，并在移动之前打印字符。它也不适用于所需的 <span>前面讨论过的元素，如果它从那里开始，也会将光标保持在输入字段的开头。

对不起，如果我把它弄糊涂了。我正在尝试考虑提供相同功能的服务，但想不出有什么。 FaceBook 有一些类似的东西，当你在评论框中输入 friend 的名字时，但内容是可编辑的，并且可以在输入的任何地方。如下图所示:

想法？欢迎任何让我朝着正确方向前进的事情!

Answer 1

在这里查看我的问题:HTML contenteditable with non-editable islands

有两种可能的解决方案。其中之一是替换它:

<span class="lead" contenteditable="false">This is some leader</span>

由此

<button class="lead" disabled>This is some leader</button>