How to control what is copy-pasted to and from the clipboard in the browser

http://taye.me/blog/user-interaction/2013/12/02/browser-clipboard-copy-paste.html

by taye • 13 years ago

30 38 13 years ago

protomyth2• 13 years ago

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.

taye6• 13 years ago

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.

protomyth2• 13 years ago

Your use sounds quite nice. Sadly, it seems that the abuse is much more common. Thanks for the suggestions.

riffraff• 13 years ago

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>.

IIRC twitter does this for urls (think "http://oo.com…").

enraged_camel3• 13 years ago

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.

seiji• 13 years ago

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?

TomSawyer• 13 years ago

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.

bauer• 13 years ago

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.

dredmorbius3• 13 years ago

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.

pavel_lishin4• 13 years ago

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

adem• 13 years ago

what about mobile clients?

taye6• 13 years ago

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.

wj• 13 years ago

Why restrict what a visitor can copy from your website? By reducing the site's utility they are less likely to revisit.

taye, I apologize if this isn't a constructive comment but this feature has annoyed me from time to time. Forbes.com just implemented it.

taye6• 13 years ago

No apology necessary.

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.

Casseres• 13 years ago

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.

ryangripp• 13 years ago

command + c = fail

taye6• 13 years ago

I don't have a mac. I was too lazy to get someone else's to test this. But I'm sure people reading can figure out how to get it working on macs :)

ben0x539• 13 years ago

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. :(

kaoD2• 13 years ago

I've seen websites preventing you from selecting any text at all. I usually select the text I'm reading as a sort of mark, so that really annoyed me.

wavefunction• 13 years ago

>Try right-clicking here to see this working

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.

Robadob• 13 years ago

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.

zetafunction• 13 years ago

This is neat... but why not use the copy/paste event handlers where possible?

taye6• 13 years ago

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.

regularfry3• 13 years ago

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.

sheetjs• 13 years ago

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)

my short spiel: http://blog.sheetjs.com/post/66908170192/the-magic-behind-ex...

taye6• 13 years ago

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.

masklinn• 13 years ago

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.

[0] http://www.w3.org/TR/clipboard-apis/

[1] http://caniuse.com/clipboard

brokenparser• 13 years ago

Good thing X11 skips the copy step, just select it and middle(/wheel) click to paste:

  Try right-clicking here to see this working

How to control what is copy-pasted to and from the clipboard in the browser

Related Stories