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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

Answer 5

以下是我用来解决它的解决方案。

战略：

删除元素时生成唯一编号
使用新ID（也就是：替换器div）替换DOM中的元素，并使用我们能够找到的ID，因为我们知道在最后一步中生成的唯一编号。
向元素添加属性，以便稍后我们可以提取唯一编号
将元素移动到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');
    });
}

“display：none”内容复制到剪贴板，粘贴时可见

5 个答案: