I was checking out the CBC website and I noticed that if you copy and paste any text from the site a reference link appears at the bottom, indicating the source. I thought that was kind of neat and tried to figure out how to do it. Turns out, they use a service called Tynt. That’s cool and all, but I wanted to see if I could make it happen using JavaScript. All I needed my function to do was grab the copied selection, tack on a copyright notice and then add the two to the clipboard.

It took a lot of messing around and I was finally able to put something together that worked in most browsers. Sorry IE people, this one won’t work for you, though if anyone figures out a fix for IE let me know. Then the function will work for all major browsers.

Here is the JavaScript:

<script type="text/javascript">
function addLink() {
	var body_element = document.getElementsByTagName('body')[0];
	var selection;
	selection = window.getSelection();
	var pagelink = "<br /><br /> Read more at: <a href='"+document.location.href+"'>"+document.location.href+"</a><br />Copyright &copy; c.bavota"; // change this if you want
	var copytext = selection + pagelink;
	var newdiv = document.createElement('div');
	newdiv.style.position='absolute';
	newdiv.style.left='-99999px';
	body_element.appendChild(newdiv);
	newdiv.innerHTML = copytext;
	selection.selectAllChildren(newdiv);
	window.setTimeout(function() {
		body_element.removeChild(newdiv);
	},0);
}
document.oncopy = addLink;
</script>

Just add this between your page’s head tags, and change the copyright notice to whatever you want.

Demo

To test it out, copy something from the paragraph below and paste it into your favorite text editor.

Aenean vel massa tellus. Aliquam imperdiet ante a justo luctus et bibendum erat porta. Morbi varius, erat et cursus ornare, elit augue bibendum leo, sed imperdiet nulla risus ut ipsum. Maecenas laoreet neque vitae magna porta sed euismod urna ornare. Nulla facilisi. Maecenas congue ligula eu arcu rhoncus volutpat. Etiam pretium pulvinar sapien, et ultrices augue euismod sagittis. Pellentesque sodales, velit tempor pharetra ultricies, lacus odio mattis ligula, vel sollicitudin erat nisl sed nisi. Pellentesque vestibulum suscipit libero, sit amet scelerisque purus aliquam vulputate. Etiam semper mauris ac felis convallis volutpat dictum ante placerat. Proin tempus elementum nisl ac eleifend. In hac habitasse platea dictumst. Duis et neque at mi lacinia luctus non ut neque. Praesent mollis metus at quam ornare bibendum. Cras augue tortor, tempor vitae adipiscing at, pulvinar vel massa. Curabitur et orci massa, sit amet malesuada diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vitae orci id lectus convallis tempus vel quis mauris.