title: Hidden text can be selected in IE despite style='display:none'
body: <p>This appears to be an IE-specific 'feature'.  I tested using IE8. User <a href="https://stackoverflow.com/users/729541/john-h">John H</a> has contributing by confirming in IE6 and IE7.</p>
  
  <p>I have some text that gets built into my page and from the beginning of the element's creation it has <code>style = "display: none;"</code></p>
  
  <p>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 <code>.html()</code> method.</p>
  
  <p>However, if the user selects text <em>nearby</em> my <code>display:none</code> element and copies what has been selected, the hidden text gets included. Just as though it had been displaying normally.</p>
  
  <p>The markup looks like this:</p>
  
  <pre><code>...
  &lt;td align="left"&gt;
      Text they should see
      &lt;div id="whateverButUnique" style="display:none;"&gt;Value I want hidden&lt;/div&gt;
      Some other text
  &lt;/td&gt;
  </code></pre>
  
  <p>Here is a <a href="http://jsfiddle.net/zexC6/" rel="nofollow noreferrer">fiddle</a> where I can reproduce the issue using IE&lt;9.</p>
  
  <p>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.</p>
  
  <p>Most of the <a href="https://stackoverflow.com/questions/4536968/css-display-not-working">other questions</a> I've seen regarding <code>display:none</code> had their posters' content as visible. Again, my content is essentially invisible <strong>until</strong> selected, copied, and finally pasted.</p>
  
  <p>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.</p>
  
  <p><strong>Update:</strong> thanks to other user's comments, I have also tried applying the style of <code>visibility:hidden</code> and <code>z-index=-1</code>. User <a href="https://stackoverflow.com/users/729541/john-h">John H</a> 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!</p>
  
  <p><strong>Update:</strong> Thanks for asking <a href="https://stackoverflow.com/users/1077783/heather-walters">Heather Walters</a>; the values that I need to use on the page are available server-side only but I then use them <em>after the page loads</em> 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.</p>
  
  <p>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:</p>
  
  <pre><code>$("[id^=whateverButUnique]").html("");
  </code></pre>
  
  <p>With potentially hundreds of elements on the page this extra processing is not ideal.</p>
  
  <p><a href="https://stackoverflow.com/users/297641/vega">vega</a>, I don't believe <a href="https://stackoverflow.com/questions/733679/displaynone-content-copied-to-clipboard-visible-when-pasted/1055701#1055701">this solution</a> 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.</p>
  
  <p><a href="https://stackoverflow.com/users/1206267/ohgodwhy">Ohgodwhy</a>, 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.</p>
  
  <p>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.</p>
  
  <p><strong>Update</strong>: <a href="https://stackoverflow.com/users/448232/robin-maben">Robin Maben</a>'s suggestion looks like it will be a <em>great</em> workaround! His suggestion is to hide the values in the <code>data-x</code> 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.</p>
  
  <p><strong>Update</strong>: 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:</p>
  
  <pre><code>&lt;div style="display:none" data-call-number="..." id="stackLocatorLinkFillUp..."&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>The ellipsis indicate unique-to-me operations going on. The id has a simple numerical indicator that increments one per record. </p>
  
  <pre><code>// 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");
  });
  </code></pre>
  
  <p>Thanks everyone! </p>