Prevent certain HTML elements from being copied

Question

I'm not entirely sure how to go about researching this idea. I'm sure it's been done, but I'm having an issue articulating it for an effective Google search.

I have a results page that has the option to download the results to a csv. But I imagine there being times when a user would rather just copy and paste the visible results on the page. How can I get it so when they copy/paste, it only displays the results and not the headings.

<h1>results #1</h1>
<p>here are all of your awesome results</p>
<p>here are all of your awesome results</p>
<span> showing 2 of 2 </span>

So in my example code, they would copy just the <p> elements & not the <h1> or <span>.

I assume it'll be a javascript/jquery solution, which I'm fine with. But not really even sure where to start with it. Can this be reasonably accomplished?

Answer 1

You can use the user-select property to disable text highlighting on the <h1> and <span>

h1, span {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
 user-select: none;
}

http://jsfiddle.net/C6KWy/