10

我遇到了将未显示的 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 中选择“仅保留文本”。）

谢谢！

4

5 回答 5

4

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

于 2009-04-09T10:52:27.383 回答
4

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

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

于 2009-06-28T20:41:08.537 回答
0

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

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

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

于 2009-06-18T21:44:06.723 回答
0

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

于 2009-06-28T21:03:39.460 回答
0

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

策略：

  1. 删除元素时生成唯一编号
  2. 将 DOM 中的元素替换为具有 ID 的新 div（又名：替换器 div），假设我们知道上一步中生成的唯一编号，我们将能够找到该 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');
    });
}
于 2014-05-21T05:45:12.360 回答