"display:none" content copied to clipboard, visible when pasted

Question

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.

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.

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 is visible.

Is there any way I can supress this? (Without resorting to telling users to select "Keep text only" in Outlook.)

Thanks!

Answer 1

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.

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.

Answer 2

Use type='hidden' instead of type='text' for the input box and wrap this inside a div with style set to display: none