views:

51

answers:

2

Im trying to make some text non-copyable, my aim isn't to stop people from copying text from my website but more to make it easier to use. I have a list of files with file size's but I want to only copy the file names and not the file size.

So far i'v tried a few different methods but non have worked, I have managed to get the text non-selectable with CSS user-select but I can still copy the file size when I select two or more rows.

I just tried using a button to prevent the copying, which didn't work ether, any ideas?

<a href="http://10.10.10.1/links/file.doc"file.doc&lt;/a&gt;
 <button type="button" disabled="disabled" id="filesize">6 MB</button><br \>

Target browser is Safari on the Mac, so experimental CSS3 or HTML5 commands that work on the latest Safari is fine.

(Thanks mvds for the suggested title, and one solution)

A: 

Use a span (or any text container really) and the unselectable attribute, like this:

<a href="http://10.10.10.1/links/file.doc"&gt;file.doc&lt;/a&gt;
<span unselectable="on">6 MB</span>

This won't work everything, but since you have a specific browser target, this will work just fine for your situation :)

To easily support a few more browsers while you're at it, you can throw some CSS in there, first define a class like this:

.unselectable { 
  user-select: none; 
  -moz-user-select: none; 
  -khtml-user-select: none; 
}

Then assign it as well, like this:

<a href="http://10.10.10.1/links/file.doc"&gt;file.doc&lt;/a&gt;
<span class="unselectable" unselectable="on">6 MB</span>
Nick Craver
I tried the user-select method, it will prevent selection but it still copies the text when selecting multiple rows.
Mint
@Mint - Any option you go with will do that, unless you strip it out manually in JavaScript. If you can select a range, it must be a *continuous range* ...the only option I can think of is for these items to be out of the normal document flow, positioned so they appear in the right place, but aren't in the selectable range.
Nick Craver
mmm yeah, that could be worth a try. Didn't think about it that way.
Mint
+2  A: 

Ugly hack alert: create 2 versions of your text, one with and one without the sizes, otherwise identical, and put them in overlapping divs, with the version without sizes having a higher z-index.

The better solution, maybe not cross-browser, is to add an

<input type="text" value="(6 MB)" style="border:0; ...">

I suggest renaming the question "how to exclude portions of text when copying" because as it stands now, it sounds like you're looking for the average hopeless copy-protection scheme, while the question is quite interesting.

mvds