Javascript: Hijack Copy?

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 appen开发者_如何学编程d 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

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.

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

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");

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.

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.