Alguns sites agora usam um serviço JavaScript da Tynt que anexa texto ao conteúdo copiado.

Se você copiar o texto de um site usando isso e depois colar, obterá um link para o conteúdo original na parte inferior do texto.

Tynt também rastreia isso conforme acontece. É um truque legal bem executado.

Seu script para fazer isso é impressionante - em vez de tentar manipular a área de transferência (o que apenas as versões mais antigas do IE permitem fazer por padrão e que deve estar sempre desligada), eles manipulam a seleção real.

Portanto, quando você seleciona um bloco de texto, o conteúdo extra é adicionado como oculto <div>incluído em sua seleção. Quando você cola, o estilo extra é ignorado e o link extra aparece.

Na verdade, isso é bastante fácil de fazer com blocos de texto simples, mas um pesadelo quando você considera todas as seleções possíveis em HTML complexo em navegadores diferentes.

Estou desenvolvendo um aplicativo da web - não quero que ninguém rastreie o conteúdo copiado e gostaria que as informações extras contivessem algo contextual, em vez de apenas um link. O serviço de Tynt não é realmente apropriado neste caso.

Alguém conhece uma biblioteca JavaScript de código aberto (talvez um plug-in jQuery ou semelhante) que fornece funcionalidade semelhante, mas que não expõe dados internos do aplicativo?

Atualização de 2020

Solução que funciona em todos os navegadores recentes .

document.addEventListener('copy', (event) => {
  const pagelink = `\n\nRead more at: ${document.location.href}`;
  event.clipboardData.setData('text', document.getSelection() + pagelink);
  event.preventDefault();
});

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<textarea name="textarea" rows="7" cols="50" placeholder="paste your copied text here"></textarea>

[Postagem mais antiga - antes da atualização de 2020]

Existem duas maneiras principais de adicionar informações extras ao texto da web copiado.

1. Manipulando a seleção

A ideia é observar o e copy event, em seguida, anexar um contêiner oculto com nossas informações extras ao dome estender a seleção a ele.
Este método foi adaptado deste artigo por c.bavota . Verifique também a versão de jitbit para casos mais complexos.

• Compatibilidade do navegador : todos os principais navegadores, IE> 8.
• Demonstração : demonstração do jsFiddle .
• Código Javascript :

    function addLink() {
        //Get the selected text and append the extra info
        var selection = window.getSelection(),
            pagelink = '<br /><br /> Read more at: ' + document.location.href,
            copytext = selection + pagelink,
            newdiv = document.createElement('div');

        //hide the newly created container
        newdiv.style.position = 'absolute';
        newdiv.style.left = '-99999px';

        //insert the container, fill it with the extended text, and define the new selection
        document.body.appendChild(newdiv);
        newdiv.innerHTML = copytext;
        selection.selectAllChildren(newdiv);

        window.setTimeout(function () {
            document.body.removeChild(newdiv);
        }, 100);
    }

    document.addEventListener('copy', addLink);

2. Manipulando a área de transferência

A ideia é observar copy evente modificar diretamente os dados da área de transferência. Isso é possível usando a clipboardDatapropriedade. Observe que esta propriedade está disponível em todos os principais navegadores em read-only; o setDatamétodo está disponível apenas no IE.

• Compatibilidade do navegador : IE> 4.
• Demonstração : demonstração do jsFiddle .
• Código Javascript :

    function addLink(event) {
        event.preventDefault();

        var pagelink = '\n\n Read more at: ' + document.location.href,
            copytext =  window.getSelection() + pagelink;

        if (window.clipboardData) {
            window.clipboardData.setData('Text', copytext);
        }
    }

    document.addEventListener('copy', addLink);

Esta é uma solução javascript vanilla de uma solução modificada acima, mas oferece suporte a mais navegadores (método de navegador cruzado)

function addLink(e) {
    e.preventDefault();
    var pagelink = '\nRead more: ' + document.location.href,
    copytext =  window.getSelection() + pagelink;
    clipdata = e.clipboardData || window.clipboardData;
    if (clipdata) {
        clipdata.setData('Text', copytext);
    }
}
document.addEventListener('copy', addLink);

A versão mais curta do jQuery que testei e está funcionando é:

jQuery(document).on('copy', function(e)
{
  var sel = window.getSelection();
  var copyFooter = 
        "<br /><br /> Source: <a href='" + document.location.href + "'>" + document.location.href + "</a><br />© YourSite";
  var copyHolder = $('<div>', {html: sel+copyFooter, style: {position: 'absolute', left: '-99999px'}});
  $('body').append(copyHolder);
  sel.selectAllChildren( copyHolder[0] );
  window.setTimeout(function() {
      copyHolder.remove();
  },0);
});

Aqui está um plugin em jquery para fazer isso https://github.com/niklasvh/jquery.plugin.clipboard Do leia-me do projeto "Este script modifica o conteúdo de uma seleção antes de um evento de cópia ser chamado, resultando na seleção copiada ser diferente do que o usuário selecionou.

Isso permite que você anexe / prefixe conteúdo à seleção, como informações de direitos autorais ou outro conteúdo.

Lançado sob licença MIT "

Melhorando a resposta, restaure a seleção após as alterações para evitar seleções aleatórias após a cópia.

function addLink() {
    //Get the selected text and append the extra info
    var selection = window.getSelection(),
        pagelink = '<br /><br /> Read more at: ' + document.location.href,
        copytext = selection + pagelink,
        newdiv = document.createElement('div');
    var range = selection.getRangeAt(0); // edited according to @Vokiel's comment

    //hide the newly created container
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';

    //insert the container, fill it with the extended text, and define the new selection
    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);

    window.setTimeout(function () {
        document.body.removeChild(newdiv);
        selection.removeAllRanges();
        selection.addRange(range);
    }, 100);
}

document.addEventListener('copy', addLink);

Melhoria para 2018

document.addEventListener('copy', function (e) {
    var selection = window.getSelection();
    e.clipboardData.setData('text/plain', $('<div/>').html(selection + "").text() + "\n\n" + 'Source: ' + document.location.href);
    e.clipboardData.setData('text/html', selection + '<br /><br />Source: <a href="' + document.location.href + '">' + document.title + '</a>');
    e.preventDefault();
});

Também uma solução um pouco mais curta:

jQuery( document ).ready( function( $ )
    {
    function addLink()
    {
    var sel = window.getSelection();
    var pagelink = "<br /><br /> Source: <a href='" + document.location.href + "'>" + document.location.href + "</a><br />© text is here";
    var div = $( '<div>', {style: {position: 'absolute', left: '-99999px'}, html: sel + pagelink} );
    $( 'body' ).append( div );
    sel.selectAllChildren( div[0] );
    div.remove();
    }



document.oncopy = addLink;
} );

É uma compilação de 2 respostas acima + compatibilidade com Microsoft Edge.

Também adicionei uma restauração da seleção original no final, como é esperado por padrão em qualquer navegador.

function addCopyrightInfo() {
    //Get the selected text and append the extra info
    var selection, selectedNode, html;
    if (window.getSelection) {
        var selection = window.getSelection();
        if (selection.rangeCount) {
            selectedNode = selection.getRangeAt(0).startContainer.parentNode;
            var container = document.createElement("div");
            container.appendChild(selection.getRangeAt(0).cloneContents());
            html = container.innerHTML;
        }
    }
    else {
        console.debug("The text [selection] not found.")
        return;
    }

    // Save current selection to resore it back later.
    var range = selection.getRangeAt(0);

    if (!html)
        html = '' + selection;

    html += "<br/><br/><small><span>Source: </span><a target='_blank' title='" + document.title + "' href='" + document.location.href + "'>" + document.title + "</a></small><br/>";
    var newdiv = document.createElement('div');

    //hide the newly created container
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';

    // Insert the container, fill it with the extended text, and define the new selection.
    selectedNode.appendChild(newdiv); // *For the Microsoft Edge browser so that the page wouldn't scroll to the bottom.

    newdiv.innerHTML = html;
    selection.selectAllChildren(newdiv);

    window.setTimeout(function () {
        selectedNode.removeChild(newdiv);
        selection.removeAllRanges();
        selection.addRange(range); // Restore original selection.
    }, 5); // Timeout is reduced to 10 msc for Microsoft Edge's sake so that it does not blink very noticeably.  
}

document.addEventListener('copy', addCopyrightInfo);