“Display: none” contenido copiado al portapapeles, visible cuando se peguen
https://stackoverflow.com/questions/733679
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy teniendo un problema con los elementos HTML no aparecen ser copiados al portapapeles, y luego se muestra cuando el contenido se pega en MS Word, Outlook, etc.
Por ejemplo:
<p>Hello</p>
<p style="display: none;">I'm Hidden</p>
<p>World</p>
Si veo que el HTML en un navegador, copie el texto a mi portapapeles, pegar en Outlook, el párrafo del medio permanece oculto. Buenas noticias.
Sin embargo, en este ejemplo:
<p>Hello</p>
<input type="text" value="I'm not hidden" style="display: none;" />
<p>World</p>
Si hago lo mismo - copiar al portapapeles, pegar en perspectiva - la introducción de texto es visible.
¿Hay alguna manera de suprimir esto? (Sin recurrir a informar a los usuarios para seleccionar "Conservar sólo texto" en Outlook.)
Gracias!
Solución
Parece que usted necesita tener el Javascript crear las secciones de DOM en lugar de sólo el cambio de estilos CSS. En lugar de cambiar la propiedad de presentación del párrafo "Estoy oculto", tiene el JavaScript crear ese elemento cuando se desea que se muestre, y retírela Whan desea ocultarlo.
Si los elementos son bastante complicadas, entonces tal vez usted puede tenerlos en la parte inferior del documento con. "Display: none", pero luego moverlos en el lugar donde desea visibles
Otros consejos
Uso type = 'oculto' en lugar de type = 'text' para el cuadro de entrada y terminar con esto dentro de un div con el estilo establecido en display: none
Debe tener en cuenta que ocultar HTML con CSS sólo funciona si el procesador es compatible con todos los estilos CSS.
El hecho de que no se ve copiar / pegar HTML en Outlook no significa que los datos no están ya allí.
No estoy seguro de lo que en realidad se está tratando de lograr:? ¿Por qué necesitan sus usuarios copiar HTML en Outlook en absoluto
Si usted requiere a los usuarios copiar el contenido, le recomiendo dejar caer ese contenido en un y permitiéndoles seleccionar / copiar haciendo clic en un botón. Puede ser difícil seleccionar exactamente el texto a la derecha en los navegadores.
Aquí está la solución que solía trabajar alrededor de ella.
La estrategia:
- generar un número único cuando se quita un elemento
- elemento de sustituir en el DOM con un nuevo div (alias: el div sustituto). Con un ID que vamos a ser capaces de encontrar dado que conocemos el número único generado en el último paso
- añadir un alojamiento al elemento de manera que cuando lo vemos más adelante podemos extraer el número único
- mover el elemento en un div que se declara en una variable para quitarla del documento completo.
- Cuando queremos mover el elemento de espalda que simplemente obtener el número único de la propiedad, busque el div sustituto que dejamos atrás y reemplazarlo con el elemento inicial.
Aquí están algunas notas:
- I utiliza slideUp () y slideDown () para animar la eliminación, pero se puede sustituir esas llamadas como mejor le parezca.
- pongo los elementos en un elemento div en una variable. Usted puede optar por moverse a otro lugar en el DOM, pero quería que elimina por completo. También puede simplemente ponerlo en una variable o una matriz. La razón por la que utilicé una variable div es que quería ser capaz de utilizar la búsqueda DOM de jQuery en él, pero yo no quería que en el DOM. Por ejemplo, yo puedo hacer:.
whereHiddenThingsLive.find('.some-class')
El código:
var whereHiddenThingsLive = $('<div></div>');
var nextNum = 0;
function hideElement(element) {
if (element.hasClass('sop-showing')) {
element.finish();
}
if (element.is(':hidden') || element.hasClass('sop-hiding')) return;
var num = nextNum++;
element.addClass('sop-hiding');
element.slideUp(400, function () {
var replacer = $('<div class="hide-replacer" style="display:none;"></div>').prop('id', 'hide-replacer-' + num);
element.prop('replaced-by', num);
element.after(replacer);
element.appendTo(whereHiddenThingsLive);
element.removeClass('sop-hiding');
});
}
function showElement(element) {
if (element.hasClass('sop-hiding')) {
element.finish();
}
if (element.is(':visible') || element.hasClass('sop-showing')) return;
element.addClass('sop-showing');
var num = element.prop('replaced-by');
element.detach();
element.removeProp('replaced-by');
$('#hide-replacer-' + num).after(element).remove();
element.slideDown(400, function() {
element.removeClass('sop-showing');
});
}
