Question

在我的项目中，我正在尝试将HTML标记字母（<和>）动态添加到可信任的div中。每当用户按字母数字字符时，我会附加一个空的span元素，用于计算插入符号在可信任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：我在这里尝试添加<和>，而不是等HTML元素。

Answer 1

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

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

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

Answer 2

我已经访问过您的代码，发现JS中有一个<b不知道您使用的是什么。

~~使用以下代码：~~

$('#btnContent').click(function(){ $('#content').html("when" + ""); });

<击> 删除<b标记后，您将无法获得此标记。或者您应该正确地接近它以使代码正确。

编辑：

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

$('#btnContent').click(function(){ $('#content').html("when <b"); $('#content').html($('#content').html() + ""); });

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

Answer 3

问题实际上是每当用户输入到contenteditable div中以获取插入符号的位置时，我都会向文本附加span元素。像这样的东西

Hello I am he|re
             ^ Caret position

然后我使用span这样的内容在其中添加.html()元素

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

现在每当我添加任何代表H {<或>的字母时，它就会合并范围内的一些文字（正如我在帖子中所示）。

所以，我通过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()，那么我必须重写完整的代码，也可能无法完成项目。

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

在contenteditable div中的html标签的奇怪行为

3 个答案: