4

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?

EnigmaRM
  • 7,523
  • 11
  • 46
  • 72
  • 3
    I think you want this http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting – user1477388 Jun 04 '13 at 20:24
  • Very nice. `user-select` is exactly what I was looking for. Didn't realize CSS had an option. If you submit more of a formal answer, I'll accept it. – EnigmaRM Jun 04 '13 at 20:32

1 Answers1

7

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/

Adrift
  • 58,167
  • 12
  • 92
  • 90
  • 1
    If you press `ctrl+A` in Firefox you will appear to select all of the text (all of it highlights), but a quick copy/paste into notepad shows that only the selectable text is copied. Cool! – Jason Sperske Jun 04 '13 at 23:27
  • 3
    This doesn't work really though. See http://jsfiddle.net/ao3m0emr/. Select from "paragraph" and down to the end. Paste somewhere. All of the text was copied. – Adam Lynch Apr 09 '15 at 11:09
  • This has been fixed in Chrome. – riv Dec 14 '18 at 15:16