

How to control what is copy-pasted to and from the clipboard in the browser - taye
http://taye.me/blog/user-interaction/2013/12/02/browser-clipboard-copy-paste.html

======
regularfry
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
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...](http://blog.sheetjs.com/post/66908170192/the-magic-behind-excel-copy-
and-paste)

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

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

~~~
riffraff
> 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…"](http://oo.com…")).

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

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

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

------
masklinn
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/](http://www.w3.org/TR/clipboard-
apis/)

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

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

    
    
      Try right-clicking here to see this working

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

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

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

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

------
adem
what about mobile clients?

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

------
ryangripp
command + c = fail

~~~
taye
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 :)

