Hidden text can be selected in IE despite style='display:none'

Question

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

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

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.

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.

The markup looks like this:

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

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.

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.

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.

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!

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.

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, 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, 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.

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.

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.

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>

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");
});

Thanks everyone!

Answer 1

Have you tried the visibility:collapse property?

If the "Value I want hidden" part is used purely for computational purposes, you should use the "data" attribute.

Like this

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

In jQuery, HTML data attributes are automatically available via the data() api.

You can do

someElement.data('customValue') to read a value.

and

someElement.data('customValue', newValue) to set a value.

Hope I analyzed your problem correctly.

Answer 2

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.