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

У меня возникла проблема с копированием не отображаемых 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.)

Спасибо!

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

Просто потому, что вы не видите, чтобы скопировать/вставить HTML в Outlook не означает, что данных еще нет.

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

Ответ 4

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

Ответ 5

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

Стратегия:

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

Вот несколько примечаний:

Я использовал slideUp() и slideDown() для анимации удаления, но вы можете заменить эти вызовы по своему усмотрению.
Я помещаю элементы в элемент div в переменную. Вы могли бы переместить его в другое место в DOM, но я хотел, чтобы он полностью удалился. Вы также можете просто поместить его в переменную или массив. Причина, по которой я использовал переменную div, - это то, что я хотел использовать jQuery DOM-поиск на ней, но я не хотел ее в 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');
    });
}