1

我有一个 SVG 元素，我在其中制作了一个 foreignObject。foreignObject 包含两个对象，一个 textarea 和一个 div。textarea 位于 div 的顶部并且是透明的。当人们在 textarea 中键入时，文本被复制到 div（一种所见即所得的编辑器）。这一切都很好。但是问题是：当您在 textarea 中选择文本（100% 透明）时，您看不到您选择的文本，所以现在我想创建一个代码，将选择复制到 div 中的文本。

我有以下内容，这些位告诉我在 textarea 中选择了什么：

var start = e.target.selectionStart;
var end = e.target.selectionEnd;

（e 是选择事件监听器的事件）

以下选择 div 中的文本：

div = $(e.target).next('div');
div = div[0];

selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(div);
selection.addRange(range);

这可行，但会选择 div 中的所有文本。如何将选择限制为仅在文本区域中选择的部分？

（顺便说一句，此代码用于演示应用程序，只需要在 firefox 中工作）

4

1 回答 1

1

我有一个类似的问题。我的解决方案是在进行转换时将两个空 HTML 元素（可能是<span class="sel-start"/>和<span class="sel-end"/>）添加到输出中。div

您可以使用相同的技巧在 中显示文本光标div，以便用户更容易看到他们现在的位置。另外，您可以使用文本光标滚动，div从而减少屏幕空间的浪费。

选择它们很简单，它们会将文本切割成段，您可以轻松地将它们包装在<span class="selected">...</span>元素中以设置它们的样式。

请注意，使用单个元素并不明智，span因为选择可能跨越块元素（p、div、列表、表格）。

于 2012-05-04T15:44:16.153 回答