Javascript 在div中选择部分文本_Javascript_Jquery_Svg

Javascript 在div中选择部分文本

javascript jquery svg

Javascript 在div中选择部分文本,javascript,jquery,svg,Javascript,Jquery,Svg,我有一个SVG元素，在其中我创建了一个foreignObject。foreignObject包含两个对象：textarea和div。textarea位于div的顶部，是透明的。当人们在文本区域中键入文本时，文本会复制到div（一种所见即所得的编辑器）。这一切都很好。但是，问题是：当您在textarea（100%透明）中选择文本时，您无法看到您选择的文本，因此现在我想创建一个代码，将所选内容复制到div中的文本我有以下到位，这些位告诉我在文本区域中选择了什么： var start = e.tar

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

我有以下到位，这些位告诉我在文本区域中选择了什么：

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

（e是select eventlistener的事件）

下面选择div中的文本：

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

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

这可以工作，但会选择div中的所有文本。如何将选择仅约束到textarea中选定的部分

（顺便说一下，这段代码是用于演示应用程序的，只需要在firefox中工作）

我也遇到了类似的问题。我的解决方案是在执行转换时向输出

div

中添加两个空HTML元素（可能是

和

）

您可以使用相同的技巧在

div

中显示文本光标，以便用户更容易看到他们现在的位置。此外，您还可以使用文本光标滚动

div

，以减少屏幕空间的浪费

选择这些元素很简单，它们将文本切割成段，您可以轻松地将这些段包装在

…

元素中，以设置它们的样式

请注意，使用单个

span

是不明智的，因为选择可能跨越块元素（

，

div

，列表，表格）。

我也有类似的问题。我的解决方案是在执行转换时向输出

div