html exclude text from clipboard copy

Question

I had a similar need, I used place holders for text that wasn't entered yet. However if the user wanted to copy that block of text they would never want the place holders in the copied text. I came up with the following solution.

Here is an example, it uses some jquery but that could be replaced

CSS (not really needed just for fun)

div.copying { background-color: yellow; }
div.copying .nocopy { display: none; }

HTML (Note: if you wanted to apply to the entire page, move oncopy to )

<body>
  <div>text not related to the copy, dont select this</div>
  <div oncopy="handleHideCopy(this);" class="container">
    <span>the text between &gt;<span class="nocopy"> I don't want this text copied </span><span>&lt; will be excluded from copy, or at least in IE</span>
  </div>
  <div>and don't select this either</div>
</body>

JS

function handleHideCopy(el) 
{
    $(el).addClass('copying');
    var innerHtml = el.innerHTML;
    $(el).find('.nocopy').remove();
    setTimeout(function(){
        $(el).removeClass('copying');
        $(el).children().remove();
        el.innerHTML = innerHtml;
    },300);
}

The reason why this works is because oncopy is called on the parent element before the copy takes place, and the content that must be hidden has to actually be removed, as display:none does absolutely nothing for copy.

Instead of using innerHTML for large amounts of html a more targeted DOM remove/insert should be used to remove the content and put it back where it belongs. I don't have an example handy for that.