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 e
Use type='hidden' instead of type='text' for the input box and wrap this inside a div with style set to display: none
Here is the solution I used to work around it.
The strategy:
Here are some notes:
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');
});
}
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.
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.
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?