jquery – 尽管style =’display:none’,仍可在IE中选择隐藏文本

前端之家收集整理的这篇文章主要介绍了jquery – 尽管style =’display:none’,仍可在IE中选择隐藏文本前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这似乎是IE特定的“功能”.我用IE8测试过.用户 John H通过在IE6和IE7中确认来做出贡献.

我有一些文本内置到我的页面中,从元素的创建开始,它有style =“display:none;”

我没有使用jQuery来隐藏文本而且文本没有“显示”.虽然为了进一步公开,我使用jQuery的.html()方法访问元素的内容.

但是,如果用户选择我的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< 9重现该问题. 虽然这不是这个特定应用程序的严重问题,但它让我措手不及,我想知道这是一个“功能”还是我做错了什么. 我见过的大部分关于显示other questions:没有人能看到他们的海报内容.同样,在选择,复制和最终粘贴之前,我的内容基本上是不可见的.

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

更新:感谢其他用户评论,我也尝试应用可见性的样式:hidden和z-index = -1.用户John H已经尝试了许多其他隐藏尝试,但IE迄今为止顽强地允许此功能漏掉.感谢所有伟大的想法!

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

一旦我完成了使用它们构建有用的东西,我现在意识到我可以通过jQuery擦除所有内容并获得额外的性能.以下代码将为启用了javascript的每个人完成此操作:

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

由于页面上可能有数百个元素,因此这种额外处理并不理想.

vega,我不相信this solution会对我有用,因为我必须在服务器端构建页面和隐藏内容.它们都是在服务器端循环中构建的,可能有数百个其他元素,因此我可以选择在服务器将所有内容放在表中(包含隐藏元素)或者第二次循环遍历它时将其构建到位(痛苦)并尝试强制显示元素:无法在不太可能被选中的地方.

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

另一个因素在起作用:这个页面已经非常重要了,所以我希望我能找到一个解决方案,阻止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< 9中选择东西时,你选择html,然后用隐藏的元素粘贴那个html. IE9和其他浏览器正确地从选择中删除这些隐藏的元素.我知道防止它的唯一方法是不要在dom中隐藏元素.

猜你在找的jQuery相关文章