Содержимое "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');
});
}