1

我有一个带有一些嵌套跨度的 contenteditable 元素，可以在其中提供样式。我需要找出在 elemebt 的任何给定偏移处的 css 类是什么。例如，我可能有这样的事情：

<div contenteditable>
     <span class"nothing">    </span>
     <span class="outer">my <span class="other">name</span> is </span><span class="name">Andrew</span>
</div>

屏幕上的文本将如下所示（使用适当的样式）：

my name is Andrew

现在，想象一下 contenteditable 区域可能更大，并且有许多嵌套的 span 元素。在任何给定的文本中给定一个偏移量，我需要能够计算包含它的 css 类。

例如，假设我需要偏移 4 处的 CSS 样式，n即name. 我希望结果是：

outer other

一个等效的解决方案是，如果给定一个偏移量（例如4），我可以计算包装该位置的 html 元素（在这种情况下，它将是：

<span class="other">name</span>

我正在使用 jquery，但没有其他库。我怎样才能轻松计算出这个？

编辑：我之前使用的是 textarea，但这不起作用。我应该使用 contenteditable div 元素。

4

2 回答 2

2

我建议插入一个临时的虚拟跨度，用 Jquery 抓取它，然后parents将类列表推到一个数组上，直到你碰到你的外部容器。当然，如果你只想要currentStyle，那就更容易了。

至于如何让你的虚拟跨度进入 textarea，如果你只有一个字符位置，请参阅Insert text into textarea at cursor position (Javascript)。如果要在插入符号处插入，请参阅使用 jQuery 将文本插入文本区域。

于 2013-02-02T00:49:02.650 回答
0

你不能用 textarea 做到这一点。其中的任何内容都将被视为文本，而不是标记。您应该查看“contenteditable”元素。

于 2013-02-02T01:04:43.087 回答