Contenu "display: none" copié dans le presse-papier, visible lorsque collé

Je vais avoir un problème avec les non-affiche les éléments HTML copié dans le presse-papiers, puis affiche lorsque le contenu est collé dans MS Word, Outlook, etc..

Par exemple:

<p>Hello</p>
<p style="display: none;">I'm Hidden</p>
<p>World</p>

Si j'ai vue que le code HTML dans un navigateur, copiez le texte à mon presse-papiers, puis les coller dans Outlook, le paragraphe du milieu qui reste caché. De bonnes nouvelles.

Toutefois, dans cet exemple:

<p>Hello</p>
<input type="text" value="I'm not hidden" style="display: none;" />
<p>World</p>

Si je fais la même chose - copier dans le presse-papiers coller dans Outlook - la saisie de texte est visible.

Est il possible que je peux le supprimer? (Sans avoir recours à dire aux utilisateurs de sélectionner le "Conserver le texte seulement" dans Outlook.)

Merci!

source d'informationauteur stubotnik

  1. 4

    Il semble que vous devez avoir le JavaScript créer les DOM sections plutôt que de simplement en modifiant les styles CSS. Au lieu de changer l'affichage de la propriété de la "je suis caché" alinéa, avoir le JavaScript créer cet élément lorsque vous souhaitez afficher, et l'enlever quand vous voulez les cacher.

    Si les éléments sont assez compliqué, alors peut-être vous pouvez les avoir à la fin du document avec "display:none", mais de les déplacer à l'endroit où vous souhaitez visibles.

  2. 4

    Utiliser type='hidden' à la place du type='text' pour la zone d'entrée et de conclure à l'intérieur d'un div avec du style display: none

  3. 0

    Vous devez être conscient que la clandestinité HTML avec CSS ne fonctionne que si le convertisseur prend en charge tous les styles CSS.

    Juste parce que vous ne voyez pas de copier/coller le code HTML dans Outlook ne signifie pas que les données ne sont pas déjà là.

    Je ne suis pas sûr de ce que vous êtes en train d'essayer de réaliser: Pourquoi avez-vous besoin de vos utilisateurs à copier HTML dans Outlook?

  4. 0

    Si vous demandez aux utilisateurs de copier le contenu, je vous recommande l'abandon de ce contenu, dans un <textarea />, et qui leur permet de sélectionner/copier en cliquant sur un bouton. Il peut être difficile de choisir exactement le bon texte dans les navigateurs.

  5. 0

    Voici la solution que j'ai utilisée pour le contourner.

    La stratégie:

    1. générer un numéro unique lorsque vous supprimez un élément
    2. remplacer l'élément dans le DOM avec un nouveau div (aka: la poudre de div) avec un ID qui nous seront en mesure de trouver étant donné que nous connaissons le numéro unique généré à l'étape précédente.
    3. ajouter une propriété à l'élément de sorte que lorsque nous voir plus tard, nous pouvons extraire le numéro unique
    4. de déplacer un élément dans un div qui est déclaré dans une variable pour le supprimer du document complètement.
    5. Lorsque l'on veut déplacer l'élément en arrière, nous avons simplement à obtenir le numéro unique de la propriété, recherchez le replacer div nous avons laissé derrière et de le remplacer avec de l'élément d'origine.

    Voici quelques remarques:

    1. J'ai utilisé slideUp() et slideDown() pour animer la suppression, mais vous pouvez remplacer ces appels que vous voyez l'ajustement.
    2. J'ai mis les éléments dans un élément div dans une variable. Vous pouvez choisir de déplacer quelque part d'autre dans le DOM, mais je voulais qu'il soit complètement enlevé. Vous pourriez tout aussi bien le mettre dans une variable ou un tableau. La raison, j'ai utilisé un div variable, je voulais être en mesure d'utiliser jQuery DOM recherche sur elle, mais je ne veux pas de ça dans les DOM. Par exemple, je peux le faire: whereHiddenThingsLive.find('.some-class').

    Le code:

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