How to control the text copied to clipboard

Question

I have a table in HTML and I have seen people copy/pasting parts of that table. When I tried it the result was a mess and required a lot of cleaning up, because the table contains a lot of columns with images and stuff.

Is there a way to limit the selection to the first 2 columns of the table?

OR

Is there a way to replace the text being copied (User selects "apple" and presses copy, but "banana" ends up in clipboard)?

score 1 · Answer 1 · edited May 23 '17 at 12:31

1

This answer from a Trello developer provides a nifty solution to something similar to what you want to do. Basically, when the user presses Cmd+C or Ctrl+C, you can select something useful that will then be copied to the clipboard.

edited May 23 '17 at 12:31

Community

1
1

answered Sep 12 '13 at 14:36

Thomas Upton

1,853
12
22

Mooseman · Answer 2 · 2013-09-12T15:46:46.617

0

JavaScript has no control over the clipboard whatsoever, which is one common use for Flash.

You can use user-select: none on the latter table <td> elements to block text highlighting in CSS. Since user-select is a new property, you must vendor prefix it for some browsers:

-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
     -o-user-select: none;
        user-select: none;

Please see http://css-tricks.com/almanac/properties/u/user-select/ for additional info on that. It should also be noted that user-select is not available in IE9 or lower.

edited Sep 12 '13 at 15:46

answered Sep 12 '13 at 14:31

Mooseman

18,763
14
70
93

I tried this, but user-select: none; seems to be ignored by browsers. – Zotta Sep 12 '13 at 14:40
Now that you have added the -moz- prefix, it works in Firefox. In other browsers this does not have the intended effect. – Zotta Sep 12 '13 at 15:55
`-webkit-` will work in Chrome/Safari and `-ms-` works in IE10+. What browser(s) are you having trouble with? – Mooseman Sep 12 '13 at 15:56
In webkit and IE it makes the marked region unselectable. BUT if i select the surroundings the content in between is still copied, even when marked with user-select. Firefox behaves differently. – Zotta Sep 12 '13 at 15:59
What are you applying `user-select` to? – Mooseman Sep 12 '13 at 16:00
`td.re` and `td.re *` which is every td except for the first 2 columns – Zotta Sep 12 '13 at 16:03

score 0 · Answer 3 · answered Sep 12 '13 at 15:26

To limit column selection i would use user-select as Mooseman suggested. Problem is that browsers currently support their own versions of the property and not the actual user-select.

<style>
    .notSelectable{  
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
</style>

You can check it's support in http://caniuse.com/user-select-none

How to control the text copied to clipboard

3 Answers3