3

I've been asked to fix a few bugs on a website, and one of them is throwing me for a loop. Due to the style layout of this particular site, when a user selects and copies text from a specified area, they copy rich text data which if pasted into a rich text editor, results in a large black text on black-background blob.

Ideally, I would like to strip all style data, or somehow enable plain text copying on a particular set of data.

Is this possible? Or would I have to resort to something like a a Flash applet like what GitHub uses for Git URLs?

VxJasonxV
  • 951
  • 11
  • 35
  • 3
    possible duplicate of [Remove Styles from Text when Copying / Cutting using CSS or Javascript](http://stackoverflow.com/questions/7439210/remove-styles-from-text-when-copying-cutting-using-css-or-javascript) – VxJasonxV Jan 03 '12 at 17:58
  • Can you try catching the `oncopy` notifier object.oncopy = notifier; function notifier(e) { //Using jquery remove the style $().removeAttr('style'); } – First Zero Jan 04 '12 at 07:04
  • How compatible is oncopy? Seems to be IE-only, which is no bueno. – VxJasonxV Jan 04 '12 at 07:58
  • oncopy is definitely supported by firefox [https://developer.mozilla.org/en/DOM/element.oncopy] and apparently supported by Chrome and Safari as well [http://help.dottoro.com/ljwexqxl.php]. Just not supported in Opera. – Robin Winslow Jan 04 '12 at 10:49
  • Later last night I looked it up on [Quirks Mode](http://www.quirksmode.org/dom/events/cutcopypaste.html) which said something similar. I'm fine with it not working in Opera :), so much doesn't work in Opera already :/. – VxJasonxV Jan 04 '12 at 16:14

2 Answers2

1

If you're happy with using JavaScript to solve the problem you can capture the "oncopy" events (credit to @FirstZero) on the elements you wish to restyle, and then restyle the element using JavaScript and style it back again after a timeout.

If you are okay using jQuery you can use JavaScript similar to the following:

$('p').bind(
    'copy',
    function(e) {
        var copyElem= $(e.target);
        var defaultColor = copyElem.css('color');
        copyElem.css('color', 'pink'); // Change the color to pink for copy
        window.setTimeout(
            function() {copyElem.css('color', defaultColor);}, // Change it back
            1
        );
    }
);

(Try it out in jsFiddle)

Note that this would be neater if there existed an onaftercopy event, but unfortunately there doesn't seem to.

I've only tested the above solution in Chrome, but it should work in Firefox (since 3.0), latest versions of Chrome and Safari, and in Internet Explorer. It will probably not work in Opera.

Robin Winslow
  • 10,908
  • 8
  • 62
  • 91
0

Many many years ago, I made a custom form that replicated the look of a menu on a video game. At the time, Firefox didn't allow many form UI widgets (Firefox 2.something?) to be styled with CSS. Apparently in the last few years that has changed.

What I wound up doing to resolve this problem was creating a very large input text-box with the content passed in via the value="" attribute. (<input type="text", not <textarea) Despite the ability to style input boxes and their content, this information is not retained when copying the text itself. So I completely side-stepped the issue, and the fixes are live!

It was quite a bit simpler too, absolutely no-JS required.

VxJasonxV
  • 951
  • 11
  • 35