Please, please don't do this. By doing it you break UI conventions I can rely on everywhere else, and introduce yet another thing that's not quite going to work right in some combination of platform and browser.
You probably don't have the budget to make sure this works properly as you intend it everywhere it's accessible, and by introducing it you're actively making your site, and by extension my experience, less reliable and less predictable.
There is one case where I really do appreciate manipulating copy-paste: selecting multiple cells in a table.
Excel ends up populating the plaintext as well as the HTML paste buffers. The plaintext buffer holds TSV output and the HTML buffer holds the full HTML. The HTML is the only way to distinguish between the two cells
|"foo|bar"|
and the single cell
|"foo\tbar"| (using some CHAR magic in excel to generate the tab character)
What if your site is a graphic editing web app using a <canvas> renderer? By convention users should be able to copy and paste graphical objects created within the app as well as paste text or images copied from elsewhere.
If you use keyboard short-cuts in your UI to copy into your app's memory but not the system clipboard then you have no way to know whether the data the user wants to paste was copied from your app or somewhere else. If you only use the system clipboard and inform the user that copy/pasting is done with right-click or key-combos and not the browser's "Edit" menu, you can handle copy-pasting predictably.
This was the most reliable method I could think of. Yes the browser's "Edit" menu is a problem and there's no way to get around that.
More important, how do I keep a site from changing what I copy / paste, because this is the crappiest UI change a site can make. I am rather sick of copying a phrase and getting a huge site advertisement and url attached.
how do I keep a site from changing what I copy / paste
1. Disable Javascript. I browse with NoScript / Scriptsafe plugs installed, and disable JS by default. This defeats the demo in the article (I actually had to enable JS to break my copy/paste).
2. Use a console-mode browser and/or curl the source and grab what you want from it (though I've found sites which break console tools).
Better: enter domains which employ such tactics in your /etc/hosts file as 0.0.0.0.
> Better: enter domains which employ such tactics in your /etc/hosts file as 0.0.0.0.
As far as I can tell, blocking *.tynt.com cuts down on 99% of such gimmmicky tactics.
(I wonder why they're such a major provider; the paranoid in me wants to believe that they're using patents aggressively; the lazy person in me doesn't care.)
Short of setting up a nameserver and going authoritative for the domain (I've done that, I'm feeling lazy), /etc/hosts doesn't take wildcards for hostnames.
I've never actually noticed any site doing that to me as I usually browse with NoScript.
I wrote that post with the intention of using the solution in apps to copy/paste app data in plain text - eg. selecting multiple objects in a drawing app and copying them as a JSON string.
I guess NoScript/Ghostery/AdBlock Plus could be considered solutions to your problem.
> I've never actually noticed any site doing that to me as I usually browse with NoScript.
Not necessarily a solution, as you can do it with css only. For example, people can put a 0-sized snippet at the end of the text, and then pad with some non-copyable text, so you select ABC, end up copying AB<something else>.
One of the features I really love in Opera (Presto, 12.16), is the ability to deny sites the ability to detect context menu events. You can do this at a per-site level too. Very useful for sites that mess with copy/paste, or right-click in general.
I've seen sites do it, but I find it fair. Most of the examples I've run into attach something like "Read more at: <url>" which isn't obnoxious. It's also easy to remove from the text that is copied.
The majority of times, if not the total, that I encounter this poor design is when I'm in the process of pasting a quote into a tweet while sharing the link with others. Too clever by half.
In what world is it "fair" for you to alter the behavior of what I expect to happen just because some people find it "easy" to fix the way you broke it?
Not all copying is fair. Many copyrighted content is copied without the author's permission and used in non-fair-use contexts. Therefore it seems reasonable for the copyright holder to alter the behavior of the copy function and append the URL to the copied text.
But I say that because I'm a reasonable person. If you feel entitled to being able to copy everything as is, then I suppose you won't like it being altered.
If I want to copy content without authors permission, I won't copy and paste and will just wget the shit out of your web page and carry on. You prevented nothing.
But as a regular user, you just made me angry preventing me to copy and paste or adding obnoxious content (which I'm going to delete anyways).
So you traded a light barrier (if any) to unfair users for a huge annoyance to legitimate ones. Not very smart IMHO.
That is not a reasonable stance. What you're saying is that the site owner is entitled to pre-judge any copy and paste as inherently unfair, and break everyone's experience as a result. That's not a judgement they should be able to make, and it's not a right they have.
Come on. Appending a URL to the copied text doesn't break anyone's experience. It's a very tiny inconvenience at best.
As for them pre-judging any copy and paste as inherently unfair, most people on the Internet copy and steal things without giving credit. Appending a URL to a chunk of copied text is a way of nudging them to cite the material. As for fair-use folks, I see it as helpful. I always cite material I copy from elsewhere manually, but now the script does it for me. In either case, it's a win.
As I mentioned in another comment, I use NoScript to disable javascript so I wouldn't even notice that kind of thing. I agree that that is unnecessary and sort of abusive to users. I only intended on using this within web apps like a document editor etc.
I absolutely hated it when websites did this. If I wanted to copy the text or image, I was going to - whether it be by going to the page source or manipulating it with Firebug. As for those ads websites sometimes through in with whatever text that's being copied, I always delete it after pasting it into my text editor. I've never seen anyone else share those copy-and-pasted ads.
As for trying it on the linked site, I have NoScript installed. Good luck trying to prevent me from copy-and-pasting now.
I right clicked on your "intercepting element," inspected with firebug, and deleted the input node. Then I could copy and paste as I desired. Firefox. 10 seconds?
My point is, we have many better things to spend our time on as developers than trying to control our user's access to the same information we're providing them. This not a reproach to taye, but to the bosses that ask us to build these worthless systems.
In chrome I can just right click the text, keep right mouse held down while I use left mouse to highlight the text I want and then lift right mouse while hovered over my newly highlighted text and select copy. This method while overkill is easily circumvented in the provided example, without even killing js or using developer tools, it could possibly be fixed with a larger covering item, but really if you don't want people copying your text, use a library to render it as an image.
The actual way to control what is copy/pasted is to use the `oncopy` and `onpaste` events and using the clipboard API[0]. This obviously relies on the browser providing sufficient clipboard access, but that's getting there[1]
Bonus: you can get (on paste) and set (on cut and copy) data in multiple file formats. And obviously you can pre-process pasted data before injecting it in the system.
On X11, text is basically copied once it's selected. And of course you're not hooking the menubar Edit > Copy way of copying. There's probably no way to make this consistently work for every kind of copying text. :(
Firfox doesn't fire paste events unless an editable element has focus. You would have to bring focus to an input element to make sure that an event is fired.
I'm really not sure and I've been too occupied to try things out.
Detecting a long hold and then selecting the text before the usual mobile context menu pops up could be good enough. I only devised this solution for a desktop app.
You probably don't have the budget to make sure this works properly as you intend it everywhere it's accessible, and by introducing it you're actively making your site, and by extension my experience, less reliable and less predictable.