CODEWITHSUNDEEP
javascripthtml
Zotta
Zotta

Reputation: 2603

How to control the text copied to clipboard

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)?

Upvotes: 1

Views: 1057

Answers (3)

Mooseman
Mooseman

Reputation: 18891

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.

Upvotes: 0

Daru
Daru

Reputation: 150

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

Upvotes: 0

Thomas Upton
Thomas Upton

Reputation: 1899

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.

Upvotes: 1

Related Questions