Steve Fenton

Help people cite your work with JavaScript

This is a little script that helps people to cite your work by placing the URL on the clipboard along with the text they are stealing referencing. It works by cloning the selection into a hidden element just before the copy-to-clipboard, and then reverting the selection just after. The example below is for modern browsers so if you want to support older browsers you would need to polyfill the addEventListener call as Internet Explorers passim used attachEvent.

The end result is the selected content, followed by “- Source:”.

(function () {
    function createSelectionCloneElement() {
        var container = document.createElement('div');
        container.innerHTML = ""; = "absolute"; = "-2000px"; = "-2000px"; = "1000px"; = "auto";
        return container;

    if (!document.addEventListener) {
        // You could polyfill, or use attachEvent etc...

    document.addEventListener('copy', function () {
        try {
            var selection = document.getSelection();

            var clone = selection.getRangeAt(0).cloneContents();

            // Container for the selection
            var alternateSelection = createSelectionCloneElement();

            alternateSelection.innerHTML += " - Source: " + document.location.href;

            var newRange = document.createRange();

            var rangeToRevertTo = selection.getRangeAt(0);

            // Switch out selection for the amended one - this is what will be copied

            setTimeout(function () {
                // Revert to the original selection
            }, 0);
        } catch (e) {}

Written by Steve Fenton on