2012-04-12 19 views
8

Esto parece ser una 'característica' específica de IE. Probé usando IE8. El usuario ha contribuido confirmando en IE6 e IE7.El texto oculto se puede seleccionar en IE a pesar de style = 'display: none'

que tienen un texto que se construye en mi página y desde el principio de la creación del elemento que tiene style = "display: none;"

no estoy usando jQuery para ocultar el texto y el texto no es 'aparecer'. Aunque, para una mayor divulgación, accedo al contenido del elemento usando el método de jQuery .html().

Sin embargo, si el usuario selecciona texto cerca de mi elemento display:none y copia lo que se ha seleccionado, se incluye el texto oculto. Como si hubiera estado exhibiendo normalmente.

El marcado se parece a esto:

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

Aquí es una fiddle donde puedo reproducir el problema utilizando Internet Explorer 9. <

Si bien esto no es una preocupación seria para esta aplicación particular, se captó con la guardia baja y me pregunté si esto es una 'característica' o si estaba haciendo algo incorrectamente.

La mayoría de los other questions que he visto con respecto a display:none tenían el contenido de sus carteles como visible. De nuevo, mi contenido es esencialmente invisible hasta que se haya seleccionado, copiado y finalmente pegado.

¿Puedo evitar que los usuarios de Internet Explorer encuentren este contenido copiando/pegando? Me di cuenta de que podían verlo en Herramientas de desarrollo y viendo la fuente.

Actualización: gracias a los comentarios de otros usuarios, también han intentado aplicar el estilo de visibility:hidden y z-index=-1. El usuario ha intentado muchos otros intentos de ocultación pero IE es tan tenaz al permitir que esta característica se escape. Gracias por todas las grandes ideas!

Actualización: Gracias por preguntar Heather Walters; los valores que necesito usar en la página están disponibles solo en el lado del servidor, pero luego los uso después de que la página cargue para generar un enlace usando procesamiento adicional desde un programa externo a través de jQuery/AJAX. Así que construyo la página con los valores ocultos pero incluidos y luego opero sobre esos valores ocultos para construir algo útil con ellos.

Una vez que he terminado de usarlos para construir algo útil, ahora me doy cuenta de que podría eliminarlos a través de jQuery y obtener un golpe de rendimiento adicional. El siguiente código se realizará en favor de todos los que han permitido javascript:

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

Con potencialmente cientos de elementos de la página de este procesamiento adicional no es lo ideal.

vega, no creo que this solution me funcione porque tengo que crear la página y mi contenido oculto en el lado del servidor.Todos están construidos en un bucle del lado del servidor con potencialmente cientos de otros elementos, así que tengo la opción de construirlo en su lugar mientras el servidor está diseñando todo en una tabla (con elementos ocultos incluidos) o recorrerlo por segunda vez. (doloroso) e intenta forzar la visualización de los elementos: ninguno en un lugar menos probable de ser seleccionado.

Ohgodwhy, quería creer en su solución. En IE8, el campo oculto no apareció en el bloc de notas; sin embargo, pude copiar la sección y pegarla en Microsoft Word. Ya no estaba oculto.

Otro factor en el trabajo: esta página ya es bastante javascript, así que esperaba poder encontrar una solución que evitara que IE vea los valores sin agregar otro pase a través de más de 100 elementos potenciales ... pero podría tener a.

actualización: sugerencia Robin Maben 's parece que va a ser una gran solución! Su sugerencia es ocultar los valores en el atributo personalizado de HTML5 data-x. Esto parece estar funcionando a pesar de mi (más probable) página no compatible con HTML5. Por favor, vote su respuesta si también la considera una valiosa contribución.

Actualización: Confirmado. He implementado con éxito la sugerencia de Maben y, por lo tanto, he podido reducir el número de búsquedas DOM, una para cada elemento de mi página. Ya estaba recorriendo todos los DIV con elementos que quería mostrar, y ahora puedo acceder automáticamente a la propiedad de datos al mismo tiempo. Esto se parece a esto en mi aplicación:

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

Los puntos suspensivos indican operaciones únicas a-me pasa. La identificación tiene un indicador numérico simple que aumenta uno por registro.

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

¡Gracias a todos!

+0

Recuerdo haber tenido problemas específicos de IE al intentar ocultar elementos. ¿Has probado usar "visibilidad: oculto"? – McGarnagle

+2

Puedo reproducir este comportamiento para IE6, IE7 e IE8. IE9 se comportaría como esperarías (esperar). Voy a adivinar que simplemente lo tratan como un elemento normal en el documento que permite que se copie. No tengo idea si hay una forma de evitarlo. Intenté posicionar el elemento fuera de la pantalla, pero eso no cambió nada. Sería interesante si alguien sabe de una solución alternativa. –

+0

Gracias @dbaseman; hasta ahora lo he intentado, mostrar: none, visibility: hidden, y z-index = -1, pero el texto aún puede copiarse en el búfer. @John H, gracias por tu confirmación. ¡Será interesante! – veeTrain

Respuesta

3

La visualización del tamaño y la posición del elemento no tienen importancia, se está seleccionando porque cuando selecciona elementos en IE < 9, está seleccionando html y luego pegando ese html, con elementos ocultos. IE9 y otros navegadores eliminan adecuadamente esos elementos ocultos de la selección. La única forma de saber para evitar que sea no tener el elemento oculto en el dom.

+0

Gracias Kevin por la breve respuesta; creo que ha respondido correctamente a la pregunta original, por lo que he contado esto como la respuesta. Sin embargo, para todos aquellos que podrían estar en una situación similar y querer una alternativa cuando su div no está oculto para seleccionar/copiar/pegar en IE <9, echa un vistazo a la publicación de @ RobinMaben a continuación. Ahora tengo un div menos y por lo tanto una búsqueda de DOM menos. – veeTrain

0

creo que es mejor si se utiliza:

position: absolute; left: -10000px; 

que eliminará cualquier problema potencial de IE.

+0

Todavía puedo copiar/pegar el texto oculto con su idea. Ver [aquí] (http://jsfiddle.net/zexC6/5/). – veeTrain

+0

También pude ver el texto en mi entorno en vivo a través de IE8, por supuesto. Gracias por su sugerencia – veeTrain

6

¿Has probado la propiedad visibility:collapse?

Si la parte "Value I want hidden" se utiliza exclusivamente para fines de cálculo, se debe utilizar el atributo "data".

gusta esta

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

En jQuery, HTML atributos de datos están disponibles de forma automática a través de la API data().

Usted puede hacer

someElement.data('customValue') para leer un valor.

y

someElement.data('customValue', newValue) para establecer un valor.

Espero que haya analizado su problema correctamente.

+0

¿Quiere decir que debo configurar el estilo de la siguiente manera: 'style = 'display: none; visibilidad: colapso''? Eso no resolvió el problema de ser seleccionable/copiable/pastable. – veeTrain

+0

Gracias por la sugerencia. No he experimentado mucho con la visibilidad hasta ahora. Lamentablemente, no lo hace menos disponible para los usuarios que desean copiar el texto junto a él (en IE <9). – veeTrain

+0

@veeTrain: vea si mi edición resuelve su problema. –

Cuestiones relacionadas