up vote 9 down vote favorite
4

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!

share|improve this question
100% accept rate
You should be aware of the fact, that, even if the text above doesn't display after copying into Outlook, it still remains there. If your users don't know that, you will run into some of this "This top secret PDF has blackened sentences, but they're just black text on black background" kind of catastrophe. – Boldewyn Jun 28 '09 at 20:16
Firefox has it fixed in 4.0. – Koterpillar May 27 '11 at 0:27
feedback

6 Answers

up vote 4 down vote accepted

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.

share|improve this answer
I think you're right. It seems that Outlook is always going to display my CSS-hidden content, so this is probably the only reasonable way to achieve what I'm after. Thanks! – stubotnik Jun 30 '09 at 8:42
feedback
up vote 3 down vote

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

share|improve this answer
Hi- thanks for the quick reply. Unfortunately, this problem is happening for other form fields too, where I don't have the "hidden" option (eg: <select>). A "display:none" container doesn't fix it either - <div style="display: none;"><select style="display: none;"> etc. - still displays when pasted. – stubotnik Apr 9 '09 at 11:08
Sorry for interrupting. But whats the use of these controls if they are not shown in the page. – rahul Apr 9 '09 at 11:10
No problem - they're show/hidden when needed using JavaScript. – stubotnik Apr 9 '09 at 11:12
Are all these shown/hidden controls inside same div or are they in different containers in the page??? Can you use asp:Panel instead of div as container of these elements?? – rahul Apr 9 '09 at 11:26
(1) The immediate parents of these elements are not the same container (2) Not using asp... – stubotnik Apr 14 '09 at 8:20
feedback
up vote 0 down vote

What happens if you use the visible attribute?

share|improve this answer
still no joy I'm araid – stubotnik Jun 26 '09 at 11:05
"I'm afraid" rather... – stubotnik Jun 26 '09 at 11:07
feedback
up vote 0 down vote

You should be aware that hiding HTML with CSS only works if the renderer supports all the CSS styles.

Just because you do not see copy/pasted HTML in Outlook does not mean the data is not already there.

I am not sure what you are actually trying to achieve: Why do you need your users to copy HTML into Outlook at all?

share|improve this answer
I don't want them to copy HTML into Outlook - but they insist! :-) (this is for an intranet app.) – stubotnik Jun 26 '09 at 11:07
feedback
up vote 0 down vote

How about wrapping appropriate elements in div tags and then "display: none" those divs when appropriate. i.e:

<p>Hello</p>
<div style="display: none;"><input type="text" value="I'm not hidden" /></div>
<p>World</p>

Also, I have sometimes found that having the closing / in the tag causes odd behaviour on occasion, perhaps try without it...

share|improve this answer
That didn't make any difference unfortunately - thanks anyway! – stubotnik Jun 30 '09 at 8:39
feedback
up vote 0 down vote

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.

share|improve this answer
dropping the content in a ____? :-) – stubotnik Jun 30 '09 at 8:39
The angle brackets won again... – Brandon Gano Jun 30 '09 at 21:03
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.