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

Question

У меня проблема с тем, что неотображаемые элементы HTML копируются в буфер обмена, а затем отображаются при вставке содержимого в MS Word, Outlook и т. Д.

Например:

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

Если я просматриваю этот HTML в браузере, копирую текст в буфер обмена, а затем вставляю в Outlook, средний абзац остается скрытым. Хорошие новости.

Однако в этом примере:

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

Если я сделаю то же самое - скопировать в буфер обмена, вставить в Outlook - текстовый ввод будет видимым.

Есть ли способ, которым я могу подавить это? (Не обращаясь к пользователям с просьбой выбрать «Сохранить только текст» в Outlook.)

Спасибо!

Answer 1

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

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

Answer 2

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

Answer 3

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

Стратегия:

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

Вот некоторые заметки:

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

Answer 4

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

Answer 5

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

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

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