尽管 style='display:none' 可以在 IE 中选择隐藏文本

Posted 2023-03-06

【中文标题】尽管 style=\'display:none\' 可以在 IE 中选择隐藏文本

【英文标题】：Hidden text can be selected in IE despite style='display:none'尽管 style='display:none' 可以在 IE 中选择隐藏文本

【发布时间】：2012-04-25 03:43:54

【问题描述】：

这似乎是 IE 特有的“功能”。我用IE8测试过。用户John H已在IE6和IE7中确认贡献。

我的页面中内置了一些文本，并且从元素创建的开始它就有style = "display: none;"

我没有使用 jQuery 来隐藏文本并且文本没有“显示”。虽然，为了进一步披露，我确实使用 jQuery 的 .html() 方法访问元素的内容。

但是，如果用户选择 nearby my display:none 元素并复制已选择的文本，则隐藏的文本将被包含在内。就像它一直正常显示一样。

标记如下所示：

...
<td align="left">
    Text they should see
    <div id="whateverButUnique" style="display:none;">Value I want hidden</div>
    Some other text
</td>

这是fiddle，我可以在其中使用 IE

虽然这不是这个特定应用程序的严重问题，但它让我措手不及，我想知道这是一个“功能”还是我做错了什么。

我看到的大多数other questionsdisplay:none 的海报内容都是可见的。同样，我的内容基本上是不可见的直到被选中、复制并最终粘贴。

我可以通过复制/粘贴来阻止 Internet Explorer 用户找到此内容吗？我意识到他们可以在开发者工具中看到它并查看源代码。

更新：感谢其他用户的cmets，我也尝试应用visibility:hidden和z-index=-1的样式。用户John H 已经尝试了许多其他隐藏尝试，但 IE 迄今为止顽强地允许此功能通过。感谢所有伟大的想法！

更新：感谢Heather Walters的提问；我需要在页面上使用的值仅在服务器端可用，但是我在页面加载后使用它们通过外部程序通过 jQuery/AJAX 进行额外处理来生成链接。因此，我使用隐藏但包含的值构建页面，然后对这些隐藏的值进行操作以构建对它们有用的东西。

不过，一旦我完成使用它们来构建有用的东西，我现在意识到我可以通过 jQuery 将它们全部清除并获得额外的性能影响。以下代码将为启用了 javascript 的每个人完成此操作：

$("[id^=whateverButUnique]").html("");

页面上可能有数百个元素，这种额外的处理并不理想。

vega，我不相信this solution 对我有用，因为我必须在服务器端构建页面和隐藏内容。它们都构建在服务器端循环中，可能包含数百个其他元素，因此我可以选择在服务器将所有内容放在表格中（包括隐藏元素）时将其构建到位，或者再次循环遍历它（痛苦）并尝试强制元素显示：none 在不太可能被选中的地方。

Ohgodwhy，我想相信你的解决方案。在 IE8 中，隐藏字段没有出现在记事本中；但是，我能够复制该部分并将其粘贴到 Microsoft Word 中。它不再隐藏。

另一个起作用的因素：这个页面已经是相当多的 javascript，所以我希望我能找到一个解决方案，防止 IE 看​​到这些值，而无需添加另一个通过 100 多个潜在元素的传递......但我可能只需要.

更新：Robin Maben 的建议看起来会是一个很棒的 解决方法！他的建议是隐藏 data-x 自定义 HTML5 属性中的值。尽管我的（很可能）不符合 HTML5 的页面，这似乎是有效的。如果您也认为他的回答很有价值，请投票赞成他的回答。

更新：已确认。我已经成功地实施了 Maben 的建议，因此能够减少 DOM 查找的次数——我页面上的每个元素都查找一次。我已经用我想要显示的项目遍历了所有 DIV，现在我可以同时自动访问 data 属性。在我的实现中看起来像这样：

<div style="display:none" data-call-number="..." id="stackLocatorLinkFillUp...">...</div>

省略号表示正在进行的独特操作。 id 有一个简单的数字指示符，每条记录递增一个。

// Loop through all of the items on the page that start with my id
$("[id^=stackLocatorLinkFillUp]").each( function() 
    // ...
    // Grab the contents of the div
    var innerContent = $(this).html();
    // Extract the call number out of the data-call-number field
    var callNumPreEncoded = $(this).data("callNumber");
    // ...eventually...
    $(this).html(...).css("display","block");
);

谢谢大家！

【问题讨论】：

我记得在尝试隐藏元素时遇到了特定于 IE 的问题。您是否尝试过使用“可见性：隐藏”？

我可以为 IE6、IE7 和 IE8 重现此行为。 IE9 会像您（希望）期望的那样运行。我猜他们只是将其视为文档中允许复制的普通元素。我不知道是否有办法解决它。我尝试将元素定位在屏幕外，但这并没有改变任何东西。如果有人知道解决方法会很有趣。

感谢@dbaseman；到目前为止，我已经尝试过 display:none、visibility:hidden 和 z-index=-1，但文本仍然可以复制到缓冲区中。 @John H，感谢您的确认。会很有趣的！

没问题。 :) 只是尝试将其浮动以查看是否会使其脱离正常的文档流，但这也不起作用。

元素的大小显示和位置无关紧要，它被选中是因为当您在 IE

【参考方案1】：

您尝试过 visibility:collapse 属性吗？

如果“Value I want hidden”部分纯粹用于计算目的，则应使用“data”属性。

像这样

<div data-custom-value="1001">Visible value </div>

在 jQuery 中，HTML 数据属性通过data() api 自动可用。

你可以的

someElement.data('customValue') 读取一个值。

和

someElement.data('customValue', newValue) 设置一个值。

希望我正确地分析了您的问题。

【讨论】：

你的意思是我应该这样设置样式：style='display:none; visibility:collapse'？这并没有解决可选择/可复制/可粘贴的问题。

感谢您的建议。到目前为止，我还没有对可见性进行太多实验。遗憾的是，它并没有减少想要复制旁边文本的用户（在 IE

罗宾；谢谢您的建议。您是否非常熟悉何时可以和/或不应该使用它？我读到something 似乎表明这将/应该只工作 IF HTML5 正在使用。看起来它在三个主要浏览器中对我有用。我应该相信“似乎有效”的东西还是有什么意外需要注意？ （或者这是我的误解并将 data-blah 自动放入我的 div 意味着我正在实现 HTML5？）

@veeTrain：这篇帖子bennadel.com/blog/… 可以解决您的恐惧。

@veeTrain：使用 data 属性不会自动告诉浏览器您正在使用 HTML5。为此，您需要使用 HTML5 文档类型。像这样“”

【参考方案2】：

元素的大小显示和位置无关紧要，它被选中是因为当您在 IE我知道唯一的防止它的方法是在 dom 中没有隐藏元素。

【讨论】：

感谢 Kevin 的简洁回复；我相信您已经正确回答了原始问题，因此我将其视为答案。但是，对于所有可能处于类似情况并希望在 IE

【参考方案3】：

我认为最好使用：

position: absolute; left: -10000px;

这将消除任何潜在的 IE 问题。

【讨论】：

我仍然可以用你的想法复制/粘贴隐藏的文本。见here。

当然，我仍然可以通过 IE8 在我的实时环境中看到文本。感谢您的建议