2

我正在尝试做“浮动”所做的事情，但不能选择复制。这是如何使用它的示例：

<p>
Lorem ipsum dolor sit amet, In a mollis est. Cras vel tortor in purus mattis 
venenatis.
<span style="width: 5em; border: 1px solid black; float: right"> What does "venenatis" means? this is a margin notes! </span>
Vivamus aliquam erat eget leo molestie egestas. Cras diam sapien. Proin in urna nec est vulputate commodo non vitae nunc. Praesent feugiat suscipit dolor et aliquet. Etiam semper lacus id nisi vehicula posuere. Vivamus aliquam erat eget leo molestie egestas. Cras diam sapien. Proin in urna nec est vulputate commodo non vitae nunc. Praesent feugiat suscipit dolor et aliquet. Etiam semper lacus id nisi vehicula posuere.
</p>

这会在相关文本的右侧制作一个类似“便利贴”的框。如果我选择要复制的文本，则注释也会被复制并且文本流被破坏。

有没有什么办法解决这一问题？

4

4 回答 4

1

更简单的解决方案

我能想到的最好方法是提供文本的替代视图，即不显示您的便利贴框的打印机友好版本。只要便利贴的内容在文本流中，您就会遇到这个问题。

潜在的（更困难的）替代方案

作为一个更困难的选择，你可以走一条 javascript 路线。它将涉及在正文中插入一个空的 DIV 并为其设置宽度和高度，然后将便利贴放置在具有绝对定位的相同位置上。

<div id="container" style="position:relative;">
  <div class="text">Duis non lorem vel diam adipiscing dignissim. 
    Nulla vel varius erat. Nulla facilisi. Vivamus pulvinar pretium dignissim. 
    Aliquam sed tortor posuere nunc bibendum mattis. Integer bibendum, elit ut 
    vestibulum tristique, dolor justo scelerisque nibh, ac blandit metus arcu 
    non nibh.In ac eros sed nisl porta bibendum quis in mauris. Quisque 

    <div style="float:right; margin:10px; width:100px; height:100px;"></div>

    pellentesque ligula eu sapien commodo at mollis purus feugiat. Vivamus 
    volutpat dictum magna eu venenatis. Suspendisse dignissim enim aliquet leo 
    imperdiet vitae accumsan mauris blandit. Donec tempus velit aliquet magna 
    imperdiet euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Vestibulum mollis tortor pellentesque velit pharetra non lobortis est 
    aliquam.
</div>
<div class="post-it">
  I am the post-it. I should be placed absolutely so that 
  I overlap the div that is presently sitting within the body of text. This 
  will give the impression that I too exist within there, but I won't be 
  selectable.
</div>
</div>

动态确定空 div 的宽度/高度，使其与 post-it 的宽度/高度相匹配，这可以使用 javascript 轻松完成。这是一个使用 jQuery 的示例：

var realWidth = $("#container > .post-it").width();
var realHeight = $("#container > .post-it").height();

$("div.text div:eq(0)").css({"width":realWidth,"height":realHeight});

然后你想获得空 div 的 x 和 y 偏移量，并将其应用为 post-it div 的 left 和 top 值，因此它位于指定区域中的文本顶部。

于 2009-09-05T04:35:17.327 回答
0

简短的回答？不。

长答案？浏览器包括所有选择的内容。避免它被选中的方法是将它放在文档中的其他位置，这样它就不会被选中。然后，您可以使用绝对定位来定位它。这肯定很不方便。这不适用于您的“浮动：正确”示例，因为内容在文档中的位置。

无论您做什么，都不要尝试使用 Javascript 来停止复制/粘贴或类似的事情。这只是惹恼用户的一种毫无意义的方式。

于 2009-09-05T04:35:52.953 回答
0

结合上述两个答案，一种真正令人费解的方法可能是有一个脚注部分，如打印文本，它位于内容下方（就 DOM 而言），但每个脚注区域都有一个带有 id 的跨度footnoted-1并且脚注区域得到一个相应的 id，如footnote-1. 然后使用一个不错的 js 框架，例如 jquery，它可以抓取所有脚注并为它们提供相对于内容区域的位置。

不过请注意：我正在为一个网站尝试这样的事情（不是很花哨，但原理相同），另一个问题很快就变得很明显。有时您的边注比相应的段落长，有时一个段落有多个注释。事情很快变得拥挤，造型变得毫无用处。

虽然我不喜欢这种风格的网站，但您可能需要考虑放弃侧边距的想法并使用其他网站采用的技术，即以不同的风格（虚线下划线或突出显示的背景）标注文本，用户可以当他们将鼠标悬停在文本上时查看注释。

于 2009-09-05T04:46:54.540 回答
0

我所知道的所有浏览器都在您开始拖动和停止拖动的光标位置下的元素之间选择源中的所有文本内容。此外，无论显示位置如何，它们都以与源相同的顺序出现在剪贴板中。请注意，右浮动内容永远不会显示在源中之前的内容之前，也可以为用户提供线索。

您需要对文本内容进行逻辑排序而不是嵌套以便单独选择它。如果您将浮动跨度放在段落的开头，则选择段落文本将按您的意愿工作。如果不使用近似的 CSS 技巧或使用 js 以及本答案中描述的结构黑客，您不能选择多个段落而中间没有注释，我完全不推荐。

于 2009-09-05T10:44:43.097 回答