“显示：无” 内容已复制到剪贴板，粘贴时可见

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 样式。 不要更改“我隐藏”段落的显示属性，而是让 JavaScript 在您希望显示该元素时创建该元素，并在您希望隐藏它时将其删除。

如果元素足够复杂，那么也许您可以使用“display:none”将它们放在文档的底部，然后将它们移动到您希望它们可见的位置。

Answer 2

使用 type='hidden' 而不是 type='text' 作为输入框，并将其包装在 div 中，样式设置为 display: none

Answer 3

您应该知道，仅当渲染器支持所有 CSS 样式时，使用 CSS 隐藏 HTML 才有效。

仅仅因为您在 Outlook 中没有看到复制/粘贴的 HTML，并不意味着数据不存在。

我不确定您实际上想要实现什么：为什么您需要用户将 HTML 复制到 Outlook 中？

Answer 4

如果您要求用户复制内容，我建议将该内容放入 中。 并允许他们通过单击按钮来选择/复制。 在浏览器中选择完全正确的文本可能很困难。

Answer 5

这是我用来解决这个问题的解决方案。

策略：

1. 当你删除一个元素时生成一个唯一的数字，
2. 用一个新的 div（又名：替换 div）替换 DOM 中的元素，假设我们知道上一步中生成的唯一数字，我们就能够找到该 ID 。
3. 向元素添加一个属性，以便当我们稍后看到它时，我们可以提取唯一编号，
4. 将元素移动到在变量中声明的 div 中，以将其从文档中完全删除。
5. 当我们想要将元素移回来时，我们只需从属性中获取唯一的编号，找到我们留下的替换 div 并将其替换为原始元素。

以下是一些注意事项：

1. 我使用lideUp()和slideDown()来动画删除，但您可以根据需要替换这些调用。
2. 我将 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');
    });
}