Html “显示：无”内容复制到剪贴板，粘贴时可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/733679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"display:none" content copied to clipboard, visible when pasted
提问by stubotnik
I'm having a problem with non-displayed HTML elements being copied to the clipboard, and then displayed when the content is pasted into MS Word, Outlook, etc.
我遇到了将未显示的 HTML 元素复制到剪贴板，然后在将内容粘贴到 MS Word、Outlook 等中时显示的问题。
For example:
例如：
<p>Hello</p>
<p style="display: none;">I'm Hidden</p>
<p>World</p>
If I view that HTML in a browser, copy the text to my clipboard, then paste into Outlook, the middle paragraph remains hidden. Good news.
如果我在浏览器中查看该 HTML，将文本复制到剪贴板，然后粘贴到 Outlook 中，中间的段落将保持隐藏状态。好消息。
However, in this example:
但是，在这个例子中：
<p>Hello</p>
<input type="text" value="I'm not hidden" style="display: none;" />
<p>World</p>
If I do the same - copy to clipboard, paste into Outlook - the text input isvisible.
如果我这样做 - 复制到剪贴板，粘贴到 Outlook - 文本输入是可见的。
Is there any way I can supress this? (Without resorting to telling users to select "Keep text only" in Outlook.)
有什么办法可以抑制这种情况吗？（无需告诉用户在 Outlook 中选择“仅保留文本”。）
Thanks!
谢谢！
采纳答案by John Saunders
It sounds like you need to have the JavaScript create the DOM sections rather than just changing CSS styles. Instead of changing the display property of the "I'm hidden" paragraph, have the JavaScript create that element when you want it to display, and remove it whan you want to hide it.
听起来您需要让 JavaScript 创建 DOM 部分，而不仅仅是更改 CSS 样式。与其更改“我已隐藏”段落的显示属性，不如让 JavaScript 在您希望显示该元素时创建该元素，并在您想隐藏时将其删除。
If the elements are complicated enough, then perhaps you can have them at the bottom of the document with "display:none", but then move them into the place where you want them visible.
如果元素足够复杂，那么也许您可以使用“display:none”将它们放在文档底部，然后将它们移动到您希望它们可见的位置。
回答by rahul
Use type='hidden' instead of type='text' for the input box and wrap this inside a div with style set to display: none
对输入框使用 type='hidden' 而不是 type='text' 并将其包装在一个 div 中，样式设置为 display: none
回答by Brandon Gano
If you require users to copy content, I'd recommend dropping that content in a <textarea /> and allowing them to select/copy by clicking a button. It can be difficult to select exactly the right text in browsers.
如果您需要用户复制内容，我建议将该内容放在 <textarea /> 中，并允许他们通过单击按钮来选择/复制。在浏览器中准确选择正确的文本可能很困难。
回答by tster
Here is the solution I used to work around it.
这是我用来解决它的解决方案。
The strategy:
策略：
- generate a unique number when you remove an element
- replace element in the DOM with a new div (aka: the replacer div) with an ID which we will be able to find given that we know the unique number generated in the last step.
- add a property to the element so that when we see it later we can extract the unique number
- move the element into a div which is declared in a variable to remove it from the document completely.
- When we want to move the element back we simply get the unique number from the property, locate the replacer div we left behind and replace it with the original element.
- 删除元素时生成唯一编号
- 将 DOM 中的元素替换为一个带有 ID 的新 div（又名：replacer div），如果我们知道在最后一步生成的唯一编号，我们将能够找到该 ID。
- 为元素添加一个属性，以便我们稍后看到它时可以提取唯一编号
- 将元素移动到在变量中声明的 div 中以将其从文档中完全删除。
- 当我们想要将元素移回时，我们只需从属性中获取唯一编号，找到我们留下的替换 div 并将其替换为原始元素。
Here are some notes:
以下是一些注意事项：
- I used slideUp() and slideDown() to animate the removal, but you can replace those calls as you see fit.
- I put the elements in a div element in a variable. You could choose to move it somewhere else in the DOM, but I wanted it completely removed. You could also just put it in a variable or an array. The reason I used a div variable is I wanted to be able to use jQuery's DOM search on it, but I didn't want it in the DOM. For example, I can do:
whereHiddenThingsLive.find('.some-class').
- 我使用了 slideUp() 和 slideDown() 来为移除设置动画，但您可以根据需要替换这些调用。
- 我将元素放在变量中的 div 元素中。您可以选择将其移动到 DOM 中的其他位置，但我希望将其完全删除。你也可以把它放在一个变量或数组中。我使用 div 变量的原因是我希望能够在其上使用 jQuery 的 DOM 搜索，但我不想在 DOM 中使用它。例如，我可以这样做：
whereHiddenThingsLive.find('.some-class')。
The code:
编码：
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');
});
}
回答by devio
You should be aware that hiding HTML with CSS only works if the renderer supports all the CSS styles.
您应该知道，只有在渲染器支持所有 CSS 样式时，才能使用 CSS 隐藏 HTML。
Just because you do not see copy/pasted HTML in Outlook does not mean the data is not already there.
仅仅因为您没有在 Outlook 中看到复制/粘贴的 HTML 并不意味着数据不存在。
I am not sure what you are actually trying to achieve: Why do you need your users to copy HTML into Outlook at all?
我不确定您实际想要实现的目标：为什么您需要您的用户将 HTML 复制到 Outlook 中？
