Delete text from copied text

Question

Hello,

I would like to use JavaScript to clean up text that’s being copied from my site.

I use snippets like this:

body {
    vertical-align: middle; ➊
}

Where ➊ indicates comment later on. I want readers to copy this snippet and use it – so I need to delete that Unicode marker. How can I access text that’s being copied and make changes to it?

I considered deleting marker(s) from snippet when user clicks (mousedown) on it, so she could select the text, copy it and then I would restore markers but it seems a really long way to do it.

Answer 1

just set the markers in comment? so it doesn't do any harm when being used after copying

Answer 2

You could turn the unicode marker into an image, as images are ignored when copying plain text.

Answer 3

Just put the unicode markers in span tags, and put display none on them when the user clicks

body {
    vertical-align: middle; <span class="marker">➊</span>
}

And then do this in jQuery

$('.code')
    .mousedown(function() {
        $(this).find('.marker').css('display','none');
    })
    .mouseleave(function() {
        $(this).find('.marker').css('display','inline');
    });

As a bonus, you could then apply the following style to the .marker elements:

​.marker
{
    position:absolute;   
    right:0;
}​

Answer 4

There is an oncopy handler, but I doubt it is widely supported. There are also selection event handlers like onselectstart (again, different for different browsers) and various attributes to make a part of the text unselectable, like -moz-user-select: none (yet again, not cross-browser). You are probably better of using absolutely positioned markers or making the marker unaccessible through z-index.