contenteditable div中html标签的奇怪行为

Question

在我的项目中，我尝试将 HTML 标记字母（< 和 >）动态添加到 contenteditable div。每当用户按下字母数字字符时，我都会附加一个空的 span 元素，用于计算插入符在 contenteditable div 中的位置。

问题是当我输入一些类似以下的词时：

when <

然后按b 之类的字母数字字符（它调用一个函数来附加一个span 元素），contenteditable div 只显示when 而不是when <b。

当我检查元素时，我发现 contenteditable div 有以下内容：

when <b<span class="spanPos"></b<span>
                              ^  strange that span is holding '</b' instead of being empty

这是一个例子JSFiddle。

我不确定这是怎么发生的。请告诉我应该怎么做才能避免这个问题。

PS：这里我尝试添加< 和>，而不是像<b></b> 这样的HTML 元素。

Answer 1

问题实际上是，每当用户在 contenteditable div 中键入内容以获取插入符号的位置时，我都会在文本中附加一个 span 元素。像这样的

Hello I am he|re
             ^ Caret position

然后我使用.html() 在该文本之间添加一个span 元素，类似这样

Hello I am he<span></span>re

现在，每当我添加任何代表 Html 的字母（如 < 或 >）时，它都会合并跨度内的一些文本（如我在上面的帖子中所示）。

所以，当我通过span 元素获得位置后，我通过删除它来解决它。我按照以下步骤为用户按下的每个字母解决了这个问题。

//Store the .text() in a variable.
//Replace Html letters inside the contenteditable div with alphabets which has same width. (for exact positioning).
//add span to the modified text through .html()
//get the offset position of the span 
//Do something with that offset position
//Remove span
//Replace the .text() inside the contenteditable div with the text which was stored in a variable.

我做了很多事情来解决这个问题，因为我在项目代码中的其他任何地方都使用了.text()。如果我把它改成.html()，那我肯定重写了完整的代码，也可能无法完成项目。

显然，我无法完成其他回复帖子中提到的事情。我希望这会对某人有所帮助。

Answer 2

我访问了您的代码，发现 JS 中有一个 <b 不知道您是否在使用它。

使用下面的代码：

$('#btnContent').click(function(){
    $('#content').html("when" + "<span class='spanPos'></span>");
});

通过删除<b 标签，您将不会得到这个。或者您应该适当地靠近它以使代码正确。

已编辑：

访问您的新代码后，我得到了解决方案，您应该使用以下代码：

$('#btnContent').click(function(){
    $('#content').html("when <b");
    $('#content').html($('#content').html()  + "<span class='spanPos'></span>");
});

如果您需要详细信息，请告诉我。

Answer 3

正如您所说，您正在尝试添加一个可以解释为 HTML 的符号。您需要对其进行转义或使用不同的方式将其表示为 ISO 实体：

$('#btnContent').click(function(){
    $('#content').html("when &lt;b" + "<span class='spanPos'></span>");
});

http://jsfiddle.net/Dekku/jXeVW/1/