Il testo nascosto può essere selezionato in IE nonostante style = 'display: none'

Question

Questa sembra essere una 'funzione' specifica IE. Ho provato usando IE8. L'utente ha contribuito confermando in IE6 e IE7.

ho qualche testo che viene costruito nella mia pagina e dall'inizio della creazione dell'elemento ha style = "display: none;"

non sto usando jQuery per nascondere il testo e il testo non è 'mostrando'. Sebbene, per ulteriori informazioni, accedo ai contenuti dell'elemento utilizzando il metodo .html() di jQuery.

Tuttavia, se l'utente seleziona il testo nelle vicinanze l'elemento display:none e copia ciò che è stato selezionato, il testo nascosto viene incluso. Proprio come se fosse stato visualizzato normalmente.

Il markup assomiglia a questo:

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

Ecco un fiddle dove posso riprodurre il problema utilizzando IE < 9.

Mentre questa non è una seria preoccupazione per questa particolare applicazione, che ha catturato mi off-guardia e mi chiedevo se questa fosse una 'caratteristica' o se stavo facendo qualcosa di sbagliato.

La maggior parte deiche ho visto per quanto riguarda lo display:none aveva il contenuto dei loro poster come visibile. Anche in questo caso, il mio contenuto è essenzialmente invisibile fino al selezionato, copiato e infine incollato.

È possibile impedire agli utenti di Internet Explorer di trovare questo contenuto copiando/incollando? Mi rendo conto che potrebbero vederlo in Strumenti per sviluppatori e visualizzando la fonte.

Aggiornamento: grazie ai commenti di altri utenti, mi hanno anche cercato di applicare lo stile di visibility:hidden e z-index=-1. L'utente ha provato molti altri tentativi di occultamento, ma IE è così tenace nel permettere a questa funzione di passare attraverso. Grazie per tutte le grandi idee!

Update: Grazie per avermelo chiesto Heather Walters; i valori che ho bisogno di usare sulla pagina sono disponibili solo sul lato server ma li uso quindi dopo che la pagina carica per generare un collegamento utilizzando l'elaborazione extra da un programma esterno tramite jQuery/AJAX. Così costruisco la pagina con i valori nascosti ma inclusi e poi agisco su quei valori nascosti per costruire qualcosa di utile con loro.

Una volta che ho finito di usarli per costruire qualcosa di utile, però, ora mi rendo conto che potrei cancellarli tutti via jQuery e ottenere un colpo di prestazioni extra. Il seguente codice dovrebbe raggiungere questo obiettivo per tutti coloro che hanno javascript abilitato:

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

Con potenzialmente centinaia di elementi della pagina questa elaborazione aggiuntiva non è l'ideale.

vega, non credo this solution avrebbe funzionato per me, perché devo costruire la pagina e il mio contenuto nascosto sul lato server.Sono tutti costruiti in un loop lato server con potenzialmente centinaia di altri elementi, quindi ho la possibilità di costruirli sul posto mentre il server sta mettendo tutto in una tabella (con elementi nascosti inclusi) o di ricollegarlo una seconda volta (doloroso) e cerca di forzare la visualizzazione degli elementi: nessuno da meno probabilità di essere selezionato.

Ohgodwhy, volevo credere nella soluzione. In IE8, il campo nascosto non veniva visualizzato nel blocco note; tuttavia, sono stato in grado di copiare la sezione e incollarla in Microsoft Word. Non era più nascosto.

Un altro fattore al lavoro: questa pagina è già piuttosto javascript pesante, quindi speravo di trovare una soluzione che impedisse a IE di vedere i valori senza aggiungere un altro passaggio attraverso 100+ elementi potenziali ... ma potrei avere solo a.

Aggiornamento: suggerimento Robin Maben s' sembra che sarà una grande soluzione! Il suo suggerimento è di nascondere i valori nell'attributo HTML5 personalizzato data-x. Sembra che funzioni nonostante la mia (più probabile) pagina non conforme a HTML5. Si prega di votare la sua risposta se si considera anche un valido contributo.

Aggiornamento: confermato. Ho implementato con successo il suggerimento di Maben e quindi sono stato in grado di ridurre il numero di ricerche DOM, una per ogni elemento della mia pagina. Stavo già eseguendo il ciclo di tutti i DIV con gli elementi che volevo mostrare e ora posso accedere automaticamente alla proprietà dei dati allo stesso tempo. Questo è simile all'implementazione:

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

I puntini di sospensione indicano le operazioni esclusive in corso. L'id ha un semplice indicatore numerico che ne incrementa uno 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"); 
}); 

Grazie a tutti!

Answer 1

La visualizzazione delle dimensioni e la posizione dell'elemento non importa, è selezionata perché quando si selezionano le cose in IE < 9, si seleziona html e quindi si incolla quell'html con gli elementi nascosti. IE9 e altri browser rimuovono correttamente quegli elementi nascosti dalla selezione. L'unico modo in cui lo so di per impedire che non abbia l'elemento nascosto nella dom.

Answer 2

Penso che sia meglio se si utilizza:

position: absolute; left: -10000px; 

che eliminerà eventuali problemi di IE.

Answer 3

Hai provato il visibility:collapse proprietà?

Se il "Value I want hidden" parte viene utilizzata esclusivamente per scopi di calcolo, è necessario utilizzare l'attributo "data".

Ti piace questa

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

In jQuery, attributi dei dati HTML sono disponibili automaticamente tramite il data() api.

Si può fare

someElement.data('customValue') per leggere un valore.

e

someElement.data('customValue', newValue) per impostare un valore.

Spero di aver analizzato correttamente il problema.