“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中选择“仅保留文本”）
谢谢！

- stubotnik

---

你应该意识到，即使将上面的文本复制到Outlook中后没有显示出来，它仍然存在。如果你的用户不知道这一点，你就会遇到一些“这份绝密PDF文件有黑色句子，但它们只是黑色背景上的黑色文本”之类的灾难。 - Boldewyn

Firefox在4.0版本中已经修复了这个问题（https://bugzilla.mozilla.org/show_bug.cgi?id=39098）。 - Koterpillar

Answer 1

看起来你需要让JavaScript创建DOM部分，而不仅仅是改变CSS样式。不要改变“我被隐藏了”段落的显示属性，当你想要显示它时，让JavaScript创建该元素，并在你想要隐藏它时将其删除。

如果元素足够复杂，那么也许你可以将它们放在文档底部并使用"display:none"进行隐藏，然后将它们移动到你想要显示的位置。

- John Saunders

---

我认为你是对的。看来Outlook总是会显示我的CSS隐藏内容，所以这可能是实现我想要的唯一合理的方法。谢谢！ - stubotnik

Answer 2

使用type='hidden'替代type='text'作为输入框类型，并将其包装在一个style属性设置为display:none的div中。

- rahul

---

嗨，感谢您的快速回复。不幸的是，这个问题也发生在其他表单字段上，我没有“hidden”选项（例如：<select>）。一个“display:none”的容器也无法解决它 - <div style="display: none;"><select style="display: none;">等等 - 粘贴时仍然会显示。 - stubotnik

抱歉打扰了。但是如果这些控件没有显示在页面上，它们有什么用呢？ - rahul

没问题 - 它们会在需要时使用 JavaScript 显示/隐藏。 - stubotnik

这些显示/隐藏控件是否都在同一个 div 中，还是在页面的不同容器中？？？您能否使用 asp:Panel 代替 div 作为这些元素的容器？？ - rahul

(1) 这些元素的直接父级不是同一个容器 (2) 不使用asp... - stubotnik

Answer 3

这是我用来解决它的方法。

策略：

1. 在删除元素时生成一个唯一的数字
2. 用一个新的 div（即替换器 div）替换 DOM 中的元素，并赋予一个 ID，我们可以通过上一步生成的唯一数字找到它。
3. 为元素添加一个属性，以便以后能够提取唯一数字
4. 将元素移动到一个变量声明的 div 中，以完全从文档中删除它。
5. 当我们想要将元素移回时，只需从属性中获取唯一数字，找到我们留下的替换器 div 并用原始元素替换它。

以下是一些注意事项：

1. 我使用了slideUp()和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');
    });
}

- tster

Answer 4

你应该知道，仅使用CSS隐藏HTML只有在渲染器支持所有CSS样式的情况下才有效。

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

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

- devio

---

我不希望他们将HTML复制到Outlook中，但是他们坚持！:-) （这是用于内部网络应用程序的。） - stubotnik

Answer 5

如果您需要用户复制内容，我建议将该内容放在中，并允许他们通过点击按钮选择/复制。在浏览器中精确选择文本可能会很困难。

- Brandon Gano

---

在一个 ____ 中删除内容？ :-) - stubotnik