Javascript: Hijack Copy?

Question

I was just reading the Times online and I wanted to copy a bit of text from the article and IM it to a friend, but I noticed when I did so, it automatically appended the link back to the article in what I had copied.

This is not a feature of my IM client, so I assume this happened because of some javascript on Times website.

How would I accomplish this if I wanted to implement it on my site? Basically, I would have to hijack the copy operation and append the URL of the article to the end of the copied content, right? Thoughts?

Here's the article I was reading, for reference: http://www.time.com/time/health/article/0,8599,1914857,00.html

Interesting that you should ask about this now. Slashdot just posted a story regarding Tynt's "service:" http://yro.slashdot.org/story/10/01/14/1818222/Tynt-Insight-Is-Watching-You-Cut-and-Paste — JasCav, Jan 14 '10 at 19:26

Sampson · Accepted Answer · 2010-01-14T17:19:51.837

5

It's a breeze with jQuery (which your referenced site is using):

$("body").bind('copy', function(e) {
    // The user is copying something
});

You can use the jQuery Search & Share Plugin which does this exact thing whenever somebody copies more than 40 chars from your site: http://www.latentmotion.com/search-and-share/

The site that you referenced is apparently using a service called Tynt Insight to accomplish this though.

edited Jan 14 '10 at 17:19

answered Jan 14 '10 at 17:05

Sampson

265,109
74
539
565

Does the jQuery copy event allow you to alter the content? – Matchu Jan 14 '10 at 17:16
Matchu, the event doesn't. It merely gives you an alert of when you should alter the content. There is a jQuery plugin that does all of this for you though, I'll reference it in my answer. – Sampson Jan 14 '10 at 17:18
2

Tynt is all the rage lately (in all the senses of the word). – Justin Johnson Jan 14 '10 at 17:30

score 1 · Answer 2 · answered Jan 14 '10 at 17:13

1

They are using the free service Tynt. If you want to accomplish the same thing, just use the same service.

answered Jan 14 '10 at 17:13

Matchu

83,922
18
153
160

Gabriel McAdams · Answer 3 · 2010-01-14T17:06:39.353

0

What browser are you using (and what version)?

In some newer browsers, the user is either asked if a website can access the clipboard, or its simply not allowed. In other browsers (IE 6, for example), it is allowed, and websites can easily read from and write to your copy clipboard.

Here is the code (IE only)

clipboardData.setData("Text", "I just put this in the clipboard using JavaScript");

edited Jan 14 '10 at 17:06

answered Jan 14 '10 at 17:00

Gabriel McAdams

56,921
12
61
77

Safari 4 doesn't ask permission. It restricts clipboard access to copy and paste events when appropriate. – eyelidlessness Jan 14 '10 at 17:02
I tried on FF and I got the website appended at the end as well. – Anthony Forloney Jan 14 '10 at 17:02
I was using Safari 4 and I wasn't asked. How would I append data to what the user selects? You example sets the data explicitly... thanks! – neezer Jan 14 '10 at 17:11
You can also read the clipboard by using clipboardData.getData (these functions, though, are IE only) – Gabriel McAdams Jan 14 '10 at 17:18
Here is another method that I have not used. It may work on other browsers: http://www.geekpedia.com/tutorial126_Clipboard-cut-copy-and-paste-with-JavaScript.html – Gabriel McAdams Jan 14 '10 at 17:18

score 0 · Answer 4 · answered Apr 01 '14 at 14:36

I recently noticed this on another website and wrote a blog post on how it works. The jQuery example doesn't seem to actually modify what the user copies and pastes, it just adds a new context menu.

In short:

var content = document.getElementById("content");
content.addEventListener("copy", oncopy);

function oncopy() {
  var newEl = document.createElement("p");
  document.body.appendChild(newEl);
  newEl.innerHTML = "In your copy, messing with your text!";
  var selection = document.getSelection();
  var range = selection.getRangeAt(0);
  selection.selectAllChildren(newEl);
  setTimeout(function() {
    newEl.parentNode.removeChild(newEl);
    selection.removeAllRanges();
    selection.addRange(range);
  }, 0)
}

The setTimeout at the end is important as it doesn't seem to work if the last part is executed immediately.

This example replaces your selected text at the last minute with my chosen string. You can also grab the existing selection and append whatever you like to the end.

Muhd · Answer 5 · 2011-11-17T02:28:10.350

0

The "Copy & Paste Hijacker" jQuery plugin does exactly what you want and seems better suited for your purposes than Tynt or Search & Share: http://plugins.jquery.com/project/copypaste

You can easily format the copied content, specify max or min characters, and easily include the title of the page or the URL in the copied content exactly where you want.

edited Nov 17 '11 at 02:28

answered Nov 17 '11 at 02:15

Muhd

24,305
22
61
78

Javascript: Hijack Copy?

5 Answers5

Linked