Was ist der beste Weg, um Text in die Zwischenablage zu kopieren? (Multi-Browser)

Ich habe versucht:

function copyToClipboard(text) {
    if (window.clipboardData) { // Internet Explorer
        window.clipboardData.setData("Text", text);
    } else {  
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);  
        clipboardHelper.copyString(text);
    }
}

In Internet Explorer wird jedoch ein Syntaxfehler ausgegeben. In Firefox heißt es unsafeWindow is not defined.

Ein schöner Trick ohne Blitz: Wie greift Trello auf die Zwischenablage des Benutzers zu?

Überblick

Es gibt drei primäre Browser-APIs zum Kopieren in die Zwischenablage:

1. Asynchrone Zwischenablage-API [navigator.clipboard.writeText]
   • Textfokussierter Teil in Chrome 66 verfügbar (März 2018)
   • Der Zugriff ist asynchron und verwendet JavaScript-Versprechen . Sie können so geschrieben werden, dass Sicherheitsbenutzer-Eingabeaufforderungen (falls angezeigt) das JavaScript auf der Seite nicht unterbrechen.
   • Text kann direkt von einer Variablen in die Zwischenablage kopiert werden.
   • Wird nur auf Seiten unterstützt, die über HTTPS bereitgestellt werden.
   • In Chrome 66 können Seiten in aktiven Registerkarten ohne Eingabeaufforderung in die Zwischenablage schreiben.
2. document.execCommand('copy')
   • Die meisten Browser unterstützen dies ab ~ April 2015 (siehe Browser-Unterstützung unten).
   • Der Zugriff ist synchron, dh es wird JavaScript auf der Seite angehalten, bis der Vorgang abgeschlossen ist, einschließlich der Anzeige und der Interaktion des Benutzers mit Sicherheitsansagen.
   • Text wird aus dem DOM gelesen und in die Zwischenablage gestellt.
   • Während des Tests ~ April 2015 wurde festgestellt, dass nur Internet Explorer beim Schreiben in die Zwischenablage Berechtigungsaufforderungen anzeigt.
3. Überschreiben des Kopierereignisses
   • Weitere Informationen zum Überschreiben des Kopierereignisses finden Sie in der Dokumentation zur Zwischenablage-API .
   • Ermöglicht das Ändern der Anzeige in der Zwischenablage bei jedem Kopierereignis. Sie können auch andere Datenformate als Nur-Text enthalten.
   • Wird hier nicht behandelt, da die Frage nicht direkt beantwortet wird.

Allgemeine Entwicklungshinweise

Erwarten Sie nicht, dass Befehle in der Zwischenablage funktionieren, während Sie Code in der Konsole testen. Im Allgemeinen muss die Seite aktiv sein (Async Clipboard API) oder eine Benutzerinteraktion (z. B. ein Benutzerklick) erfordern, damit ( document.execCommand('copy')) auf die Zwischenablage zugreifen kann (siehe unten).

WICHTIG (hier vermerkt 2020/02/20)

Beachten Sie, dass seit diesem Beitrag wurde ursprünglich geschrieben in Quer Herkunft IFRAMEs deprecation von Berechtigungen und anderen IFRAME „Sandbox“ verhindert , dass die eingebetteten Demos „Run - Code - Snippet“ Tasten und „codepen.io Beispiels“ von der Arbeit in einigen Browsern (einschließlich Chrome und Microsoft Edge ).

Um eine eigene Webseite zu erstellen, stellen Sie diese Seite über eine HTTPS-Verbindung zum Testen und Entwickeln bereit.

Hier ist eine Test- / Demoseite, die die Funktionsweise des Codes demonstriert: https://deanmarktaylor.github.io/clipboard-test/

Async + Fallback

Aufgrund der Browserunterstützung für die neue Async-Zwischenablage-API möchten Sie wahrscheinlich auf die document.execCommand('copy')Methode zurückgreifen , um eine gute Browserabdeckung zu erzielen.

Hier ist ein einfaches Beispiel (funktioniert möglicherweise nicht eingebettet in diese Site, lesen Sie den "wichtigen" Hinweis oben):

function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  
  // Avoid scrolling to bottom
  textArea.style.top = "0";
  textArea.style.left = "0";
  textArea.style.position = "fixed";

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});

<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:

  </textarea>
</div>

(Das Beispiel codepen.io funktioniert möglicherweise nicht. Lesen Sie den "wichtigen" Hinweis oben.) Beachten Sie, dass dieses Snippet in der eingebetteten Vorschau von Stack Overflow nicht gut funktioniert. Sie können es hier ausprobieren: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors = 1011

Asynchrone Zwischenablage-API

• Ankündigungsbeitrag zu Chrome 66 (März 2018)
• Referenz Async Zwischenablage API Entwurf Dokumentation

Beachten Sie, dass Sie über die Berechtigungs-API in Chrome 66 die Berechtigung "anfordern" und den Zugriff auf die Zwischenablage testen können.

var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
  console.log('Async: Copying to clipboard was successful!');
}, function(err) {
  console.error('Async: Could not copy text: ', err);
});

document.execCommand ('copy')

Der Rest dieses Beitrags befasst sich mit den Nuancen und Details der document.execCommand('copy')API.

Browser-Unterstützung

Die JavaScript- document.execCommand('copy')Unterstützung wurde erweitert. Browser-Updates finden Sie unter den folgenden Links:

• Internet Explorer 10+ (obwohl dieses Dokument angibt, dass Internet Explorer 5.5+ Unterstützung bietet).
• Google Chrome 43+ (~ April 2015)
• Mozilla Firefox 41+ (Versand ~ September 2015)
• Opera 29+ (basierend auf Chrom 42, ~ April 2015)

Einfaches Beispiel

(funktioniert möglicherweise nicht eingebettet in diese Site, lesen Sie den "wichtigen" Hinweis oben)

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.focus();
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

<p>
  <button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
  <textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>

Komplexes Beispiel: In die Zwischenablage kopieren, ohne dass Eingaben angezeigt werden

Das obige einfache Beispiel funktioniert hervorragend, wenn auf dem Bildschirm ein textareaoder input-Element angezeigt wird.

In einigen Fällen möchten Sie möglicherweise Text in die Zwischenablage kopieren, ohne ein input/ textarea-Element anzuzeigen . Dies ist ein Beispiel für eine Möglichkeit, dies zu umgehen (Element einfügen, in die Zwischenablage kopieren, Element entfernen):

Getestet mit Google Chrome 44, Firefox 42.0a1 und Internet Explorer 11.0.8600.17814.

(funktioniert möglicherweise nicht eingebettet in diese Site, lesen Sie den "wichtigen" Hinweis oben)

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");

  //
  // *** This styling is an extra step which is likely not required. ***
  //
  // Why is it here? To ensure:
  // 1. the element is able to have focus and selection.
  // 2. if element was to flash render it has minimal visual impact.
  // 3. less flakyness with selection and copying which **might** occur if
  //    the textarea element is not visible.
  //
  // The likelihood is the element won't even render, not even a
  // flash, so some of these are just precautions. However in
  // Internet Explorer the element is visible whilst the popup
  // box asking the user for permission for the web page to
  // copy to the clipboard.
  //

  // Place in top-left corner of screen regardless of scroll position.
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;

  // Ensure it has a small width and height. Setting to 1px / 1em
  // doesn't work as this gives a negative w/h on some browsers.
  textArea.style.width = '2em';
  textArea.style.height = '2em';

  // We don't need padding, reducing the size if it does flash render.
  textArea.style.padding = 0;

  // Clean up any borders.
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';

  // Avoid flash of white box if rendered for any reason.
  textArea.style.background = 'transparent';


  textArea.value = text;

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

  document.body.removeChild(textArea);
}


var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});

<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:

  </textarea>
</div>

Zusätzliche Bemerkungen

Funktioniert nur, wenn der Benutzer eine Aktion ausführt

Alle document.execCommand('copy')Aufrufe müssen als direktes Ergebnis einer Benutzeraktion erfolgen, z. B. Klickereignishandler. Dies ist eine Maßnahme, um zu verhindern, dass die Zwischenablage des Benutzers durcheinander gebracht wird, wenn er dies nicht erwartet.

Weitere Informationen finden Sie im Beitrag der Google-Entwickler hier .

Zwischenablage-API

Beachten Sie, dass die vollständige Entwurfsspezifikation der Zwischenablage-API hier zu finden ist: https://w3c.github.io/clipboard-apis/

Wird es unterstützt?

• document.queryCommandSupported('copy')sollte zurückgeben, truewenn der Befehl "vom Browser unterstützt wird".
• und document.queryCommandEnabled('copy')kehren Sie zurück, truewenn der document.execCommand('copy')Erfolg erfolgreich ist, wenn Sie jetzt aufgerufen werden. Überprüfen, ob der Befehl von einem vom Benutzer initiierten Thread aufgerufen wurde und andere Anforderungen erfüllt sind.

Jedoch als Beispiel für Browser Kompatibilitätsprobleme, Google Chrome von ~ April bis ~ Oktober 2015 nur zurück trueaus , document.queryCommandSupported('copy')wenn der Befehl von einem Benutzer initiierten Thread aufgerufen wurde.

Beachten Sie die Kompatibilitätsdetails unten.

Details zur Browserkompatibilität

Während ein einfacher Aufruf zum document.execCommand('copy')Umschließen in einen try/ catch-Block, der als Ergebnis eines Benutzerklicks aufgerufen wird, Ihnen die größtmögliche Kompatibilität bietet, hat das Folgende einige Vorbehalte:

Jeder Aufruf document.execCommand, document.queryCommandSupportedoder document.queryCommandEnabledsollte in einem eingewickelt werden try/ catchBlock.

Unterschiedliche Browser-Implementierungen und Browser-Versionen lösen beim Aufrufen unterschiedliche Arten von Ausnahmen aus, anstatt zurückzukehren false.

Verschiedene Browser-Implementierungen sind noch im Fluss und die Zwischenablage-API befindet sich noch im Entwurf. Denken Sie also daran, Ihre Tests durchzuführen .

Das automatische Kopieren in die Zwischenablage kann gefährlich sein, daher machen es die meisten Browser (außer IE) sehr schwierig. Persönlich verwende ich den folgenden einfachen Trick:

function copyToClipboard(text) {
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

Dem Benutzer wird das Eingabeaufforderungsfeld angezeigt, in dem der zu kopierende Text bereits ausgewählt ist. Jetzt reicht es, Ctrl+ Cund Enter(um die Box zu schließen) zu drücken - und voila!

Jetzt ist der Kopiervorgang in der Zwischenablage SICHER, da der Benutzer ihn manuell ausführt (jedoch auf ziemlich einfache Weise). Funktioniert natürlich in allen Browsern.

<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>

<script>
  function copyToClipboard(text) {
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
  }
</script>

Der folgende Ansatz funktioniert in Chrome, Firefox, Internet Explorer und Edge sowie in neueren Versionen von Safari (Kopierunterstützung wurde in Version 10 hinzugefügt, die im Oktober 2016 veröffentlicht wurde).

• Erstellen Sie einen Textbereich und setzen Sie dessen Inhalt auf den Text, den Sie in die Zwischenablage kopieren möchten.
• Hängen Sie den Textbereich an das DOM an.
• Wählen Sie den Text im Textbereich aus.
• Rufen Sie document.execCommand auf ("copy")
• Entfernen Sie den Textbereich aus dem Dom.

Hinweis: Der Textbereich wird nicht angezeigt, da er innerhalb desselben synchronen Aufrufs von Javascript-Code hinzugefügt und entfernt wird.

Einige Dinge, auf die Sie achten sollten, wenn Sie dies selbst implementieren:

• Aus Sicherheitsgründen kann dies nur von einem Ereignishandler wie click aufgerufen werden (genau wie beim Öffnen von Fenstern).
• Internet Explorer zeigt beim ersten Aktualisieren der Zwischenablage einen Berechtigungsdialog an.
• Internet Explorer und Edge scrollen, wenn der Textbereich fokussiert ist.
• execCommand () kann in einigen Fällen auslösen.
• Zeilenumbrüche und Tabulatoren können verschluckt werden, wenn Sie keinen Textbereich verwenden. (Die meisten Artikel scheinen die Verwendung eines div zu empfehlen)
• Der Textbereich wird angezeigt, während das Internet Explorer-Dialogfeld angezeigt wird. Sie müssen ihn entweder ausblenden oder die Internet Explorer-spezifische clipboardData-API verwenden.
• In Internet Explorer können Systemadministratoren die Zwischenablage-API deaktivieren.

Die folgende Funktion sollte alle folgenden Probleme so sauber wie möglich behandeln. Bitte hinterlassen Sie einen Kommentar, wenn Sie Probleme haben oder Verbesserungsvorschläge haben.

// Copies a string to the clipboard. Must be called from within an
// event handler such as click. May return false if it failed, but
// this is not always possible. Browser support for Chrome 43+,
// Firefox 42+, Safari 10+, Edge and Internet Explorer 10+.
// Internet Explorer: The clipboard feature may be disabled by
// an administrator. By default a prompt is shown the first
// time the clipboard is used (per session).
function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
        // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
        return clipboardData.setData("Text", text);

    }
    else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in Microsoft Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        }
        catch (ex) {
            console.warn("Copy to clipboard failed.", ex);
            return false;
        }
        finally {
            document.body.removeChild(textarea);
        }
    }
}

https://jsfiddle.net/fx6a6n6x/

Hier ist meine Einstellung dazu ...

function copy(text) {
    var input = document.createElement('input');
    input.setAttribute('value', text);
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
 }

@korayem: Beachten Sie, dass die Verwendung des HTML- inputFelds Zeilenumbrüche nicht berücksichtigt \nund Text in eine einzelne Zeile reduziert .

Wie von @nikksan in den Kommentaren erwähnt, textareawird das Problem mit using wie folgt behoben :

function copy(text) {
    var input = document.createElement('textarea');
    input.innerHTML = text;
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
}

Wenn Sie eine wirklich einfache Lösung suchen (die Integration dauert weniger als 5 Minuten) und sofort gut aussieht, ist Clippy eine gute Alternative zu einigen der komplexeren Lösungen.

Es wurde von einem Mitbegründer von GitHub geschrieben. Beispiel für einen Flash-Einbettungscode unten:

<object
   classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
   width="110"
   height="14"
   id="clippy">
  <param name="movie" value="/flash/clippy.swf"/>
  <param name="allowScriptAccess" value="always"/>
  <param name="quality" value="high"/>
  <param name="scale" value="noscale"/>
  <param NAME="FlashVars" value="text=#{text}"/>
  <param name="bgcolor" value="#{bgcolor}"/>
  <embed
     src="/flash/clippy.swf"
     width="110"
     height="14"
     name="clippy"
     quality="high"
     allowScriptAccess="always"
     type="application/x-shockwave-flash"
     pluginspage="http://www.macromedia.com/go/getflashplayer"
     FlashVars="text=#{text}"
     bgcolor="#{bgcolor}"/>
</object>

Denken Sie daran, #{text}den zu kopierenden Text #{bgcolor}durch eine Farbe zu ersetzen .

Das Lesen und Ändern der Zwischenablage von einer Webseite wirft Sicherheits- und Datenschutzbedenken auf. In Internet Explorer ist dies jedoch möglich. Ich habe dieses Beispiel-Snippet gefunden :

    <script type="text/javascript">
        function select_all(obj) {
            var text_val=eval(obj);
            text_val.focus();
            text_val.select();
            r = text_val.createTextRange();
            if (!r.execCommand) return; // feature detection
            r.execCommand('copy');
        }
    </script>
    <input value="http://www.sajithmr.com"
     onclick="select_all(this)" name="url" type="text" />

Ich habe kürzlich einen technischen Blog-Beitrag zu diesem Problem geschrieben (ich arbeite bei Lucidchart und wir haben kürzlich unsere Zwischenablage überarbeitet).

Das Kopieren von einfachem Text in die Zwischenablage ist relativ einfach, vorausgesetzt, Sie möchten dies während eines Systemkopierereignisses tun (der Benutzer drückt CtrlCoder verwendet das Menü des Browsers).

var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1 
           || navigator.userAgent.toLowerCase().indexOf("trident") != -1);

document.addEventListener('copy', function(e) {
    var textToPutOnClipboard = "This is some text";
    if (isIe) {
        window.clipboardData.setData('Text', textToPutOnClipboard);    
    } else {
        e.clipboardData.setData('text/plain', textToPutOnClipboard);
    }
    e.preventDefault();
});

Das Einfügen von Text in die Zwischenablage nicht während eines Systemkopierereignisses ist viel schwieriger. Es sieht so aus, als ob einige dieser anderen Antworten auf Möglichkeiten verweisen, dies über Flash zu tun. Dies ist meines Wissens die einzige browserübergreifende Möglichkeit, dies zu tun.

Abgesehen davon gibt es einige Optionen von Browser zu Browser.

Dies ist die einfachste Version im Internet Explorer, in der Sie jederzeit über JavaScript auf das clipboardData-Objekt zugreifen können:

window.clipboardData

(Wenn Sie versuchen, dies außerhalb eines Ereignisses zum Ausschneiden, Kopieren oder Einfügen des Systems zu tun, fordert der IE den Benutzer jedoch auf, die Berechtigung für die Zwischenablage der Webanwendung zu erteilen.)

In Chrome können Sie eine Chrome-Erweiterung erstellen, mit der Sie Berechtigungen für die Zwischenablage erhalten (dies tun wir für Lucidchart). Für Benutzer mit installierter Erweiterung müssen Sie das Systemereignis nur noch selbst auslösen:

document.execCommand('copy');

Es sieht so aus, als ob Firefox einige Optionen hat , mit denen Benutzer bestimmten Websites Berechtigungen für den Zugriff auf die Zwischenablage erteilen können, aber ich habe keine dieser Optionen persönlich ausprobiert.

clipboard.js ist ein kleines Nicht-Flash-Dienstprogramm, mit dem Text- oder HTML-Daten in die Zwischenablage kopiert werden können. Es ist sehr einfach zu bedienen, fügen Sie einfach die .js hinzu und verwenden Sie Folgendes:

<button id='markup-copy'>Copy Button</button>

<script>
document.getElementById('markup-copy').addEventListener('click', function() {
  clipboard.copy({
    'text/plain': 'Markup text. Paste me into a rich text editor.',
    'text/html': '<i>here</i> is some <b>rich text</b>'
  }).then(
    function(){console.log('success'); },
    function(err){console.log('failure', err);
  });

});
</script>

clipboard.js ist auch auf GitHub .

Hinweis: Dies ist jetzt veraltet. Migrieren Sie hierher .

ZeroClipboard ist die beste browserübergreifende Lösung, die ich gefunden habe:

<div id="copy" data-clipboard-text="Copy Me!">Click to copy</div>    
<script src="ZeroClipboard.js"></script>
<script>
  var clip = new ZeroClipboard( document.getElementById('copy') );
</script>

Wenn Sie keine Flash-Unterstützung für iOS benötigen, fügen Sie einfach einen Fallback hinzu:

clip.on( 'noflash', function ( client, args ) {
    $("#copy").click(function(){            
        var txt = $(this).attr('data-clipboard-text');
        prompt ("Copy link, then click OK.", txt);
    });
});  

http://zeroclipboard.org/

https://github.com/zeroclipboard/ZeroClipboard

Im Jahr 2018 können Sie folgendermaßen vorgehen:

async copySomething(text?) {
  try {
    const toCopy = text || location.href;
    await navigator.clipboard.writeText(toCopy);
    console.log('Text or Page URL copied');
  }
  catch (err) {
    console.error('Failed to copy: ', err);
  }
}

Es wird in meinem Angular 6+ Code wie folgt verwendet:

<button mat-menu-item (click)="copySomething()">
    <span>Copy link</span>
</button>

Wenn ich eine Zeichenfolge übergebe, wird sie kopiert. Wenn nichts, wird die URL der Seite kopiert.

Es kann auch mehr Gymnastik in der Zwischenablage gemacht werden. Weitere Informationen finden Sie hier:

Entsperren des Zugriffs auf die Zwischenablage

Aus einem der Projekte, an denen ich gearbeitet habe, einem jQuery-Plugin zum Kopieren in die Zwischenablage, das die Zero Clipboard- Bibliothek verwendet.

Es ist einfacher zu verwenden als das native Zero Clipboard-Plugin, wenn Sie ein starker jQuery-Benutzer sind.

Da Chrome 42+ und Firefox 41+ jetzt den Befehl document.execCommand ('copy') unterstützen . Also habe ich ein paar Funktionen für eine Cross-Browser - Copy-to-Zwischenablage Fähigkeit , eine Kombination der Verwendung von Tim Down alten Antwort und Google Developer Antwort :

function selectElementContents(el) {
    // Copy textarea, pre, div, etc.
    if (document.body.createTextRange) {
        // IE
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
        textRange.execCommand("Copy");
    } 
    else if (window.getSelection && document.createRange) {
        // Non-Internet Explorer
        var range = document.createRange();
        range.selectNodeContents(el);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copy command was ' + msg);
        }
        catch (err) {
            console.log('Oops, unable to copy');
        }
    }
} // end function selectElementContents(el)

function make_copy_button(el) {
    var copy_btn = document.createElement('input');
    copy_btn.type = "button";
    el.parentNode.insertBefore(copy_btn, el.nextSibling);
    copy_btn.onclick = function() {
        selectElementContents(el);
    };

    if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42) {
        // Copy works with Internet Explorer 4+, Chrome 42+, Firefox 41+, Opera 29+
        copy_btn.value = "Copy to Clipboard";
    }
    else {
        // Select only for Safari and older Chrome, Firefox and Opera
        copy_btn.value = "Select All (then press Ctrl + C to Copy)";
    }
}
/* Note: document.queryCommandSupported("copy") should return "true" on browsers that support copy
    but there was a bug in Chrome versions 42 to 47 that makes it return "false".  So in those
    versions of Chrome feature detection does not work!
    See https://code.google.com/p/chromium/issues/detail?id=476508
*/

make_copy_button(document.getElementById("markup"));

<pre id="markup">
  Text that can be copied or selected with cross browser support.
</pre>

Ich benutze dies sehr erfolgreich ( ohne jQuery oder ein anderes Framework).

function copyToClp(txt){
    txt = document.createTextNode(txt);
    var m = document;
    var w = window;
    var b = m.body;
    b.appendChild(txt);
    if (b.createTextRange) {
        var d = b.createTextRange();
        d.moveToElementText(txt);
        d.select();
        m.execCommand('copy');
    } 
    else {
        var d = m.createRange();
        var g = w.getSelection;
        d.selectNodeContents(txt);
        g().removeAllRanges();
        g().addRange(d);
        m.execCommand('copy');
        g().removeAllRanges();
    }
    txt.remove();
}

Warnung

Tabulatoren werden in Leerzeichen konvertiert (zumindest in Chrome).

Ich habe folgende Lösung gefunden:

Beim Key-Down-Handler wird das "Pre" -Tag erstellt. Wir legen den Inhalt so fest, dass er in dieses Tag kopiert wird, treffen dann eine Auswahl für dieses Tag und geben im Handler true zurück. Dies ruft den Standard-Handler für Chrom auf und kopiert den ausgewählten Text.

Bei Bedarf können Sie das Zeitlimit für die Funktion zum Wiederherstellen der vorherigen Auswahl festlegen. Meine Implementierung auf Mootools:

   function EnybyClipboard() {
     this.saveSelection = false;
     this.callback = false;
     this.pastedText = false;

     this.restoreSelection = function() {
       if (this.saveSelection) {
         window.getSelection().removeAllRanges();
         for (var i = 0; i < this.saveSelection.length; i++) {
           window.getSelection().addRange(this.saveSelection[i]);
         }
         this.saveSelection = false;
       }
     };

     this.copyText = function(text) {
       var div = $('special_copy');
       if (!div) {
         div = new Element('pre', {
           'id': 'special_copy',
           'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
         });
         div.injectInside(document.body);
       }
       div.set('text', text);
       if (document.createRange) {
         var rng = document.createRange();
         rng.selectNodeContents(div);
         this.saveSelection = [];
         var selection = window.getSelection();
         for (var i = 0; i < selection.rangeCount; i++) {
           this.saveSelection[i] = selection.getRangeAt(i);
         }
         window.getSelection().removeAllRanges();
         window.getSelection().addRange(rng);
         setTimeout(this.restoreSelection.bind(this), 100);
       } else return alert('Copy not work. :(');
     };

     this.getPastedText = function() {
       if (!this.pastedText) alert('Nothing to paste. :(');
       return this.pastedText;
     };

     this.pasteText = function(callback) {
       var div = $('special_paste');
       if (!div) {
         div = new Element('textarea', {
           'id': 'special_paste',
           'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
         });
         div.injectInside(document.body);
         div.addEvent('keyup', function() {
           if (this.callback) {
             this.pastedText = $('special_paste').get('value');
             this.callback.call(null, this.pastedText);
             this.callback = false;
             this.pastedText = false;
             setTimeout(this.restoreSelection.bind(this), 100);
           }
         }.bind(this));
       }
       div.set('value', '');
       if (document.createRange) {
         var rng = document.createRange();
         rng.selectNodeContents(div);
         this.saveSelection = [];
         var selection = window.getSelection();
         for (var i = 0; i < selection.rangeCount; i++) {
           this.saveSelection[i] = selection.getRangeAt(i);
         }
         window.getSelection().removeAllRanges();
         window.getSelection().addRange(rng);
         div.focus();
         this.callback = callback;
       } else return alert('Fail to paste. :(');
     };
   }

Verwendungszweck:

enyby_clip = new EnybyClipboard(); //init 

enyby_clip.copyText('some_text'); // place this in CTRL+C handler and return true;

enyby_clip.pasteText(function callback(pasted_text) {
        alert(pasted_text);
}); // place this in CTRL+V handler and return true;

Beim Einfügen wird ein Textbereich erstellt und funktioniert auf die gleiche Weise.

PS kann diese Lösung verwendet werden, um eine vollständig browserübergreifende Lösung ohne Flash zu erstellen. Es funktioniert in FF und Chrome.

Die anderen Methoden kopieren einfachen Text in die Zwischenablage. Um HTML zu kopieren (dh Sie können Ergebnisse in einen WSIWYG-Editor einfügen), können Sie NUR im IE Folgendes tun . Dies unterscheidet sich grundlegend von den anderen Methoden, da der Browser den Inhalt tatsächlich sichtbar auswählt.

// create an editable DIV and append the HTML content you want copied
var editableDiv = document.createElement("div");
with (editableDiv) {
    contentEditable = true;
}     
editableDiv.appendChild(someContentElement);          

// select the editable content and copy it to the clipboard
var r = document.body.createTextRange();
r.moveToElementText(editableDiv);
r.select();  
r.execCommand("Copy");

// deselect, so the browser doesn't leave the element visibly selected
r.moveToElementText(someHiddenDiv);
r.select();   

Ich habe zusammengestellt, was ich für das Beste halte.

• Verwendet cssText, um Ausnahmen in Internet Explorer im Gegensatz zum direkten Stil zu vermeiden.
• Stellt die Auswahl wieder her, falls vorhanden
• Legt schreibgeschützt fest, damit die Tastatur auf Mobilgeräten nicht angezeigt wird
• Hat eine Problemumgehung für iOS, so dass es tatsächlich so funktioniert, wie es normalerweise execCommand blockiert.

Hier ist es:

const copyToClipboard = (function initClipboardText() {
  const textarea = document.createElement('textarea');

  // Move it off screen.
  textarea.style.cssText = 'position: absolute; left: -99999em';

  // Set to readonly to prevent mobile devices opening a keyboard when
  // text is .select()'ed.
  textarea.setAttribute('readonly', true);

  document.body.appendChild(textarea);

  return function setClipboardText(text) {
    textarea.value = text;

    // Check if there is any content selected previously.
    const selected = document.getSelection().rangeCount > 0 ?
      document.getSelection().getRangeAt(0) : false;

    // iOS Safari blocks programmtic execCommand copying normally, without this hack.
    // /programming/34045777/copy-to-clipboard-using-javascript-in-ios
    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
      const editable = textarea.contentEditable;
      textarea.contentEditable = true;
      const range = document.createRange();
      range.selectNodeContents(textarea);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
      textarea.setSelectionRange(0, 999999);
      textarea.contentEditable = editable;
    }
    else {
      textarea.select();
    }

    try {
      const result = document.execCommand('copy');

      // Restore previous selection.
      if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
      }

      return result;
    }
    catch (err) {
      console.error(err);
      return false;
    }
  };
})();

Verwendungszweck: copyToClipboard('some text')

Ab Flash 10 können Sie nur dann in die Zwischenablage kopieren, wenn die Aktion aus der Benutzerinteraktion mit einem Flash-Objekt stammt. ( Lesen Sie den entsprechenden Abschnitt aus der Flash 10-Ankündigung von Adobe )

Die Lösung besteht darin, ein Flash-Objekt über der Schaltfläche "Kopieren" oder einem beliebigen Element, das das Kopieren initiiert, übermäßig zu verwenden. Zero Clipboard ist derzeit die beste Bibliothek mit dieser Implementierung. Erfahrene Flash-Entwickler möchten möglicherweise nur ihre eigene Bibliothek erstellen.

Ich habe folgende Lösung gefunden:

Ich habe den Text in einer versteckten Eingabe. Da setSelectionRangeversteckte Eingaben nicht funktionieren, habe ich den Typ vorübergehend in Text geändert, den Text kopiert und dann wieder ausgeblendet. Wenn Sie den Text aus einem Element kopieren möchten, können Sie ihn an die Funktion übergeben und seinen Inhalt in der Zielvariablen speichern.

jQuery('#copy').on('click', function () {
    copyToClipboard();
});

function copyToClipboard() {
    var target = jQuery('#hidden_text');

    // Make it visible, so can be focused
    target.attr('type', 'text');
    target.focus();
    // Select all the text
    target[0].setSelectionRange(0, target.val().length);

    // Copy the selection
    var succeed;
    try {
        succeed = document.execCommand("copy");
    }
    catch (e) {
        succeed = false;
    }

    // Hide input again
    target.attr('type', 'hidden');

    return succeed;
}

Kopieren Sie Text von der HTML-Eingabe in die Zwischenablage:

 function myFunction() {
   /* Get the text field */
   var copyText = document.getElementById("myInput");

   /* Select the text field */
   copyText.select();

   /* Copy the text inside the text field */
   document.execCommand("Copy");

   /* Alert the copied text */
   alert("Copied the text: " + copyText.value);
 }

 <!-- The text field -->
 <input type="text" value="Hello Friend" id="myInput">

 <!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>

Hinweis: Die document.execCommand()Methode wird in Internet Explorer 9 und früheren Versionen nicht unterstützt.

Quelle : W3Schools - Kopieren Sie Text in die Zwischenablage

Es gibt bereits viele Antworten, Sie möchten jedoch eine hinzufügen (jQuery). Funktioniert hervorragend in jedem Browser, auch in mobilen Browsern (dh fordert zur Sicherheit auf, aber wenn Sie dies akzeptieren, funktioniert es einwandfrei).

function appCopyToClipBoard(sText)
{
    var oText = false,
        bResult = false;
    try
    {
        oText = document.createElement("textarea");
        $(oText).addClass('clipboardCopier').val(sText).insertAfter('body').focus();
        oText.select();
        document.execCommand("Copy");
        bResult = true;
    }
    catch(e) {
    }

    $(oText).remove();
    return bResult;
}

In Ihrem Code:

if (!appCopyToClipBoard('Hai there! This is copied to the clipboard.'))
{
    alert('Sorry, copy to clipboard failed.');
}

Dies ist eine Art Kombination zwischen den anderen Antworten.

var copyToClipboard = function(textToCopy){
    $("body")
        .append($('<textarea name="fname" class="textToCopyInput"/>' )
        .val(textToCopy))
        .find(".textToCopyInput")
        .select();
      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        alert('Text copied to clipboard!');
      } catch (err) {
          window.prompt("To copy the text to clipboard: Ctrl+C, Enter", textToCopy);
      }
     $(".textToCopyInput").remove();
}

Es verwendet jQuery, muss es aber natürlich nicht. Sie können das ändern, wenn Sie möchten. Ich hatte gerade jQuery zur Verfügung. Sie können auch CSS hinzufügen, um sicherzustellen, dass die Eingabe nicht angezeigt wird. Zum Beispiel so etwas wie:

.textToCopyInput{opacity: 0; position: absolute;}

Oder Sie können natürlich auch ein Inline-Styling durchführen

.append($('<textarea name="fname" style="opacity: 0;  position: absolute;" class="textToCopyInput"/>' )

In anderen Browsern als IE müssen Sie ein kleines Flash-Objekt verwenden, um die Zwischenablage zu bearbeiten, z

• Automatisches Kopieren in die Zwischenablage

Ich hatte das gleiche Problem beim Erstellen einer benutzerdefinierten Rasterbearbeitung aus (so etwas wie Excel) und der Kompatibilität mit Excel. Ich musste die Auswahl mehrerer Zellen, das Kopieren und Einfügen unterstützen.

Lösung: Erstellen Sie einen Textbereich, in den Sie Daten einfügen, die der Benutzer kopieren soll (für mich, wenn der Benutzer Zellen auswählt), konzentrieren Sie sich darauf (z. B. wenn der Benutzer drückt Ctrl) und wählen Sie den gesamten Text aus.

Wenn der Benutzer Ctrl+ Cdrückt, erhält er kopierte Zellen, die er ausgewählt hat. Nach dem Testen wurde nur die Größe des Textbereichs auf ein Pixel geändert (ich habe nicht getestet, ob es auf dem Display funktioniert: keine). Es funktioniert gut in allen Browsern und ist für den Benutzer transparent.

Einfügen - Sie können das Gleiche tun (je nach Ziel unterschiedlich) - konzentrieren Sie sich weiterhin auf Textbereiche und fangen Sie Einfügeereignisse mit onpaste ab (in meinem Projekt verwende ich Textbereiche in Zellen zum Bearbeiten).

Ich kann kein Beispiel einfügen (kommerzielles Projekt), aber Sie haben die Idee.

Ich habe clipboard.js verwendet.

Wir können es auf npm bekommen:

npm install clipboard --save

Und auch auf Bower

bower install clipboard --save

Verwendung und Beispiele finden Sie unter https://zenorocha.github.io/clipboard.js/ .

Dies ist eine Erweiterung der Antwort von @ Chase mit dem Vorteil, dass sie für IMAGE- und TABLE-Elemente funktioniert, nicht nur für DIVs in IE9.

if (document.createRange) {
    // IE9 and modern browsers
    var r = document.createRange();
    r.setStartBefore(to_copy);
    r.setEndAfter(to_copy);
    r.selectNode(to_copy);
    var sel = window.getSelection();
    sel.addRange(r);
    document.execCommand('Copy');  // does nothing on FF
} else {
    // IE 8 and earlier.  This stuff won't work on IE9.
    // (unless forced into a backward compatibility mode,
    // or selecting plain divs, not img or table). 
    var r = document.body.createTextRange();
    r.moveToElementText(to_copy);
    r.select()
    r.execCommand('Copy');
}

Es scheint, dass ich die Frage falsch verstanden habe, aber als Referenz können Sie einen Bereich des DOM extrahieren (nicht in die Zwischenablage; kompatibel mit allen modernen Browsern) und ihn mit den Ereignissen oncopy und onpaste sowie onbeforepaste kombinieren, um das Verhalten der Zwischenablage zu erhalten. Hier ist der Code, um dies zu erreichen:

function clipBoard(sCommand) {
  var oRange=contentDocument.createRange();
  oRange.setStart(startNode, startOffset);
  oRange.setEnd(endNode, endOffset);
/* This is where the actual selection happens.
in the above, startNode and endNode are dom nodes defining the beginning 
and end of the "selection" respectively. startOffset and endOffset are 
constants that are defined as follows:

END_TO_END: 2
END_TO_START: 3
NODE_AFTER: 1
NODE_BEFORE: 0
NODE_BEFORE_AND_AFTER: 2
NODE_INSIDE: 3
START_TO_END: 1
START_TO_START: 0

and would be used like oRange.START_TO_END */
      switch(sCommand) {
    case "cut":
          this.oFragment=oRange.extractContents();
      oRange.collapse();
      break;
    case "copy":
      this.oFragment=oRange.cloneContents();
      break;
    case "paste":
      oRange.deleteContents();
      var cloneFragment=this.oFragment.cloneNode(true)
      oRange.insertNode(cloneFragment);
      oRange.collapse();
      break;
  }
}

Mein Fehler. Dies funktioniert nur im IE.

Hier ist noch eine andere Möglichkeit, Text zu kopieren:

<p>
    <a onclick="window.clipboardData.setData('text', document.getElementById('Test').innerText);">Copy</a>
</p>

Dies war das einzige, was ich jemals zum Arbeiten gebracht habe, nachdem ich im Internet nach verschiedenen Möglichkeiten gesucht hatte. Dies ist ein chaotisches Thema. Es gibt viele Lösungen auf der ganzen Welt und die meisten funktionieren nicht . Das hat bei mir funktioniert:

HINWEIS: Dieser Code funktioniert nur, wenn er als direkter synchroner Code für eine onClick-Methode ausgeführt wird. Wenn Sie eine asynchrone Antwort an Ajax oder auf eine andere asynchrone Weise aufrufen, funktioniert dies nicht.

copyToClipboard(text) {
    var copyText = document.createElement("input");
    copyText.type = "text";
    document.body.appendChild(copyText);
    copyText.style = "display: inline; width: 1px;";
    copyText.value = text;
    copyText.focus();
    document.execCommand("SelectAll");
    document.execCommand("Copy");
    copyText.remove();
}

Mir ist klar, dass dieser Code eine 1 Pixel breite Komponente für eine Millisekunde sichtbar auf dem Bildschirm anzeigt, aber ich habe beschlossen, mir darüber keine Sorgen zu machen, was andere tun können, wenn es sich um ein echtes Problem handelt.

Um einen ausgewählten Text ('Zu kopierender Text') in Ihre Zwischenablage zu kopieren, erstellen Sie ein Lesezeichen (Browser-Lesezeichen, das JavaScript ausführt) und führen Sie es aus (klicken Sie darauf). Es wird ein temporärer Textbereich erstellt.

Code von GitHub:

https://gist.github.com/stefanmaric/2abf96c740191cda3bc7a8b0fc905a7d

(function (text) {
  var node = document.createElement('textarea');
  var selection = document.getSelection();

  node.textContent = text;
  document.body.appendChild(node);

  selection.removeAllRanges();
  node.select();
  document.execCommand('copy');

  selection.removeAllRanges();
  document.body.removeChild(node);
})('Text To Copy');