display:none содержимое, скопированное в буфер обмена, видимое при вставке

Похоже, вам нужно, чтобы JavaScript создавал разделы DOM, а не просто изменял стили CSS. Вместо того, чтобы изменять свойство отображения абзаца «Я скрыт», пусть JavaScript создаст этот элемент, когда вы хотите, чтобы он отображался, и удалите его, когда вы хотите его скрыть.

Если элементы достаточно сложны, то, возможно, вы можете разместить их внизу документа с помощью «display:none», но затем переместить их в то место, где вы хотите, чтобы они были видны.

Используйте type='hidden' вместо type='text' для поля ввода и оберните его внутри div со стилем, установленным для отображения: none

Вы должны знать, что скрытие HTML с помощью CSS работает только в том случае, если средство визуализации поддерживает все стили CSS.

Тот факт, что вы не видите скопированный/вставленный HTML-код в Outlook, не означает, что данных еще нет.

Я не уверен, чего вы на самом деле пытаетесь достичь: зачем вам вообще нужно, чтобы ваши пользователи копировали HTML в Outlook?

Если вы требуете, чтобы пользователи копировали контент, я бы рекомендовал поместить этот контент в ‹текстовое поле /› и позволить им выбирать/копировать, нажимая кнопку. В браузерах может быть сложно выбрать правильный текст.

Вот решение, которое я использовал, чтобы обойти это.

Стратегия:

1. генерировать уникальный номер при удалении элемента
2. замените элемент в DOM новым div (также известным как div-заменитель) с идентификатором, который мы сможем найти, учитывая, что мы знаем уникальный номер, сгенерированный на последнем шаге.
3. добавить свойство к элементу, чтобы, когда мы увидим его позже, мы могли извлечь уникальный номер
4. переместите элемент в div, который объявлен в переменной, чтобы полностью удалить его из документа.
5. Когда мы хотим переместить элемент обратно, мы просто получаем уникальный номер из свойства, находим замещающий div, который мы оставили, и заменяем его исходным элементом.

Вот несколько заметок:

1. Я использовал slideUp() и slideDown() для анимации удаления, но вы можете заменить эти вызовы по своему усмотрению.
2. Я помещаю элементы в элемент div в переменную. Вы можете переместить его в другое место в DOM, но я хотел, чтобы он был полностью удален. Вы также можете просто поместить его в переменную или массив. Причина, по которой я использовал переменную div, заключается в том, что я хотел иметь возможность использовать для нее поиск DOM jQuery, но я не хотел этого в DOM. Например, я могу сделать: whereHiddenThingsLive.find('.some-class').

Код:

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