Wie fügen Sie zusätzliche info zu web text kopiert

Es gibt zwei Möglichkeiten zum hinzufügen von zusätzlichen Informationen zum kopierten web-text.

1. Manipulation der Auswahl

Die Idee ist zu schauen, für die copy event, dann fügen Sie ein hidden container mit unseren extra-info zu den dom, und erweitern Sie die Auswahl.

Diese Methode ist adaptiert von dieser Artikel von c.bavota. Überprüfen Sie auch jitbit's version für komplexere Fall.

• Browser-Kompatibilität: Alle gängigen Browser, IE - > 8.
• Demo: jsFiddle demo.
• Javascript-code:

    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. Die Manipulation der Zwischenablage

Die Idee ist, zu beobachten copy event und Bearbeiten Sie direkt die Daten in der Zwischenablage. Dies ist möglich mit der clipboardData Eigenschaft. Beachten Sie, dass diese Eigenschaft ist verfügbar in allen gängigen Browsern in read-only; die setData Methode ist nur auf den IE.

• Browser-Kompatibilität: IE - > 4.
• Demo: jsFiddle demo.
• Javascript-code:

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

InformationsquelleAutor CronosS

Die kürzeste version für jQuery, die ich getestet und funktioniert:

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

InformationsquelleAutor user2276146

Verbesserung auf die Antwort, wiederherstellen Auswahl nach den änderungen, um zu verhindern, dass zufällige Auswahl nach dem kopieren.

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

InformationsquelleAutor digitalPBK

Auch ein wenig kürzer Lösung:

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

InformationsquelleAutor almo