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

Question

这似乎是 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");
});

谢谢大家！

Answer 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) 设置一个值。

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

Answer 2

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

Answer 3

我认为最好使用：

position: absolute; left: -10000px;

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