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

问题描述

这似乎是特定于IE的功能。我测试使用IE8。用户 John H 通过在IE6和IE7中进行确认来提供帮助。

This appears to be an IE-specific 'feature'. I tested using IE8. User John H has contributing by confirming in IE6 and IE7.

我有一些内置于我的页面的文本，从元素的创建开始它有 style =display：none;

I have some text that gets built into my page and from the beginning of the element's creation it has style = "display: none;"

我不使用jQuery隐藏文本，文本不是显示。虽然，为了进一步的公开，我使用jQuery的 .html（）方法访问元素的内容。

I'm not using jQuery to hide the text and the text is not 'showing up'. Although, for further disclosure, I do access the element's contents using jQuery's .html() method.

如果用户选择附近的我的 display：none 元素并复制已选择的内容，则隐藏的文本被包括。

However, if the user selects text nearby my display:none element and copies what has been selected, the hidden text gets included. Just as though it had been displaying normally.

标记看起来像这样：

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

这里是 fiddle 其中我可以使用IE <9重现问题。

Here is a fiddle where I can reproduce the issue using IE<9.

虽然这不是这个特定应用程序的严重关注，

While this is not a serious concern for this particular application, it caught me off-guard and I wondered if this is a 'feature' or if I was doing something incorrectly.

大部分 display：none 的海报内容是可见的。

Most of the other questions I've seen regarding display:none had their posters' content as visible. Again, my content is essentially invisible until selected, copied, and finally pasted.

我可以阻止Internet Explorer用户通过复制查找此内容/粘贴？

Can I prevent Internet Explorer users from finding this content by copying / pasting? I realize they could see it in Developer Tools and by viewing the source.

更新：感谢其他用户的评论，我也尝试过应用 visibility：hidden 和 z-index = -1 的样式。用户约翰·H 尝试过许多其他隐藏尝试，但IE是如此顽强以允许此功能滑过。非常感谢您的所有好点子！

Update: thanks to other user's comments, I have also tried applying the style of visibility:hidden and z-index=-1. User John H has tried lots of other hiding attempts but IE is so far tenacious at allowing this feature to slip through. Thanks for all the great ideas!

更新：感谢您询问 Heather Walters ;我需要在页面上使用的值仅在服务器端可用，但我会在页面加载后使用它们通过jQuery / AJAX从外部程序生成链接使用额外的处理。因此，我建立的网页的值隐藏但包括，然后操作这些隐藏的值来建立一些有用的东西。

Update: Thanks for asking Heather Walters; the values that I need to use on the page are available server-side only but I then use them after the page loads to generate a link using extra processing from an outside program via jQuery/AJAX. So I build the page with the values hidden but included and then operate on those hidden values to build something useful with them.

一旦我完成使用他们构建一些有用的，但是，现在我意识到我可以通过jQuery擦除他们，并采取额外的性能打击。以下代码将为所有启用了javascript的用户完成此操作：

Once I am done using them to build something useful, though, I now realize I could wipe them all out via jQuery and take an extra performance hit. The following code would accomplish this for everyone that has javascript enabled:

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

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

With potentially hundreds of elements on the page this extra processing is not ideal.

vega ，我不相信这个解决方案将为我工作，因为我必须构建页面和我的隐藏内容服务器端。它们都内置在一个服务器端循环中，可能有数百个其他元素，所以我可以选择将它建立在适当的位置，而服务器将所有的东西放在一个表（包含隐藏元素）或第二次循环（痛苦），并尝试强制要素显示：无某处不太可能被选择。

vega, I don't believe this solution would work for me because I have to build the page and my hidden content on the server side. They are all built in a server-side loop with potentially hundreds of other elements so I have the choice to either build it in place while the server is laying everything out in a table (with hidden element included) or loop through it a second time (painful) and try to force the elements to display:none somewhere less likely to be selected.

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

Ohgodwhy, I wanted to believe in your solution. In IE8, the hidden field didn't show up in notepad; however, I was able to copy the section and paste it into Microsoft Word. It was no longer hidden.

另一个因素在工作：这个页面已经漂亮的javascript重，所以我希望我可以找到一个解决方案，将阻止IE看到值

Another factor at work: this page is already pretty javascript heavy so I was hoping I could find a solution that would prevent IE from seeing the values without adding another pass through 100+ potential elements...but I might just have to.

更新： Robin Maben 的建议看起来像是一个很好的解决方法！他的建议是隐藏 data-x 自定义HTML5属性中的值。这似乎是工作，尽管我（很可能）非HTML5兼容页。

Update: Robin Maben's suggestion looks like it will be a great workaround! His suggestion is to hide the values in the data-x custom HTML5 attribute. This appears to be working despite my (most likely) non HTML5 compliant page. Please up-vote his answer if you also consider it a valuable contribution.

更新：已确认。我已经成功地实现了Maben的建议，因此已经能够减少DOM查找数量 - 一个页面上的每个元素。我已经循环通过所有的DIVs的项目，我想显示，现在我可以自动访问data属性在同一时间。在我的实现中看起来像这样：

Update: Confirmed. I have successfully implemented Maben's suggestion and therefore have been able to reduce the number of DOM look-ups -- one for every element on my page. I was already looping through all of the DIVs with items that I wanted to show, and now I can automatically access the data property at the same time. This looks like this in my implementation:

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

省略号表示正在进行的唯一操作。 id有一个简单的数字指示器，每个记录增加一个。

The ellipsis indicate unique-to-me operations going on. The id has a simple numerical indicator that increments one per record.

// 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 <9 ，您选择html，然后粘贴该html，隐藏元素。 IE9和其他浏览器从选择中正确删除这些隐藏元素。我知道以防止它的唯一方法是在dom中没有隐藏的元素。

The size display and position of the element doesn't matter, it's being selected because when you select things in IE<9, you are selecting html and then pasting that html, with hidden elements. IE9 and other browsers properly remove those hidden elements from the selection. The only way i know of to prevent it is to not have the hidden element in the dom.

这篇关于隐藏文本可以在IE中选择，尽管style ='display：none'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！