Search code examples
htmlcssnoncopyable

How to exclude portions of text when copying


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</a>
 <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)


Solution

  • 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.