Frage Wie kopiere ich in JavaScript in die Zwischenablage?


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

aber im Internet Explorer gibt es einen Syntaxfehler. In Firefox heißt es unsafeWindow is not defined.

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


2663
2017-12-30 13:09


Ursprung


Antworten:


Überblick

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

  1. Asynchrone Zwischenablage-API  [navigator.clipboard.writeText]
    • Text-fokussierter Teil verfügbar in Chrome 66 (März 2018)
    • Der Zugriff ist asynchron und verwendet JavaScript-Versprechen, kann so geschrieben werden, dass Sicherheitsbenutzeraufforderungen (falls angezeigt) die JavaScript-Seite nicht unterbrechen.
    • Text kann direkt aus einer Variablen in die Zwischenablage kopiert werden.
    • Nur auf Seiten unterstützt, die über HTTPS bereitgestellt werden.
    • In Chrome 66 Seiten in aktiven Registerkarten können in die Zwischenablage ohne eine Eingabeaufforderung für Berechtigungen schreiben.
  2. document.execCommand('copy')
    • Die meisten Browser unterstützen dies ab April 2015 (siehe Browser-Unterstützung unten).
    • Der Zugriff ist synchron, d. H. Stoppt JavaScript auf der Seite, bis das Anzeigen und die Interaktion des Benutzers mit Sicherheitsaufforderungen abgeschlossen ist.
    • Text wird aus dem DOM gelesen und in die Zwischenablage gelegt.
    • Während des Tests ~ April 2015 wurde nur der Internet Explorer als Eingabeaufforderung für Berechtigungen während des Schreibens in die Zwischenablage notiert.
  3. Überschreiben des Kopiervorgangs
    • Siehe Clipboard-API-Dokumentation unter Überschreiben des Kopiervorgangs.
    • Ermöglicht Ihnen das Ändern von Daten, die in der Zwischenablage von einem beliebigen Kopiervorgang erscheinen. Sie können auch andere Datenformate als Nur-Text einschließen.
    • Hier nicht behandelt, da es die Frage nicht direkt beantwortet.

Allgemeine Entwicklungshinweise

Erwarten Sie nicht, dass mit der Zwischenablage verbundene Befehle funktionieren, während Sie Code in der Konsole testen. Im Allgemeinen muss die Seite aktiv sein (Async Clipboard API) oder erfordert Benutzerinteraktion (z. B. einen Benutzerklick), umdocument.execCommand('copy')) für den Zugriff auf die Zwischenablage siehe unten für weitere Details.

Async + Fallback

Aufgrund der Unterstützung des Browsers für die neue Async Clipboard API möchten Sie wahrscheinlich auf die document.execCommand('copy') Methode, um eine gute Browserabdeckung zu erhalten.

Hier ist ein einfaches Beispiel:

function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  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>

Beachten Sie, dass dieses Snippet in der eingebetteten Vorschau von StackOverflow nicht gut funktioniert. Sie können es hier ausprobieren: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors=1011

Asynchrone Zwischenablage-API

Beachten Sie, dass es die Möglichkeit gibt, eine Berechtigung anzufordern und über die Berechtigungs-API in Chrome 66 auf den Zugriff auf die Zwischenablage zu testen.

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.execommand ('kopieren')

Der Rest dieses Beitrags geht in die Nuancen und Details des document.execCommand('copy') API.

Browserunterstützung

Das JavaScript document.execCommand('copy') Der Support ist gewachsen, siehe die folgenden Links für Browser-Updates:

Einfaches Beispiel

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 die Eingabe anzuzeigen

Das obige einfache Beispiel funktioniert sehr gut, wenn es a gibt textarea oder input Element auf dem Bildschirm sichtbar.

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

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

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 IE 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') Anrufe müssen als direkte Folge einer Benutzeraktion, z.B. Klicken Sie auf Ereignishandler. Dies ist eine Maßnahme, um zu verhindern, dass die Zwischenablage des Benutzers durcheinander gebracht wird, wenn sie es nicht erwartet.

Siehe die Google Entwickler posten hier Für mehr Information.

Zwischenablage-API

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

Wird es unterstützt?

  • document.queryCommandSupported('copy') sollte zurückkehren true wenn der Befehl "vom Browser unterstützt wird".
  • und document.queryCommandEnabled('copy') Rückkehr true wenn die document.execCommand('copy') wird erfolgreich sein, wenn jetzt aufgerufen wird. Überprüfung, um sicherzustellen, dass der Befehl von einem benutzerinitiierten Thread aufgerufen wurde und andere Anforderungen erfüllt sind.

Als Beispiel für Probleme mit der Browserkompatibilität wurde jedoch Google Chrome von ~ April bis Oktober 2015 zurückgegeben true von document.queryCommandSupported('copy') wenn der Befehl von einem benutzerinitiierten Thread aufgerufen wurde.

Beachten Sie die Kompatibilitätsdetails unten.

Browserkompatibilitätsdetails

Während ein einfacher Anruf an document.execCommand('copy') eingewickelt in a try/catch Block, der als Ergebnis eines Benutzer-Klicks aufgerufen wird, erhalten Sie die meiste Kompatibilität verwenden die folgenden hat einige Vorbehalte:

Jeder Anruf an document.execCommand, document.queryCommandSupported oder document.queryCommandEnabled sollte in a eingewickelt werden try/catch Block.

Verschiedene Browserimplementierungen und Browserversionen werfen beim Aufruf unterschiedliche Arten von Ausnahmen aus, anstatt sie zurückzugeben false.

Verschiedene Browserimplementierungen sind noch in Bewegung und die Zwischenablage-API ist noch im Entwurf, also denken Sie daran, Ihre Tests zu machen.


1581
2018-06-12 18:56



Automatisches 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 die Eingabeaufforderungsbox angezeigt, in der der zu kopierende Text bereits ausgewählt ist. Jetzt reicht es zu drücken Strg+C und Eingeben (um die Box zu schließen) - und voila!

Jetzt ist der Kopiervorgang der Zwischenablage SAFE, weil der Benutzer es manuell (aber in einer ziemlich direkten Weise) tut. Natürlich funktioniert 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>


1195
2018-05-19 08:06



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

  • Erstellen Sie einen Textbereich, und legen Sie den Inhalt auf den Text fest, der in die Zwischenablage kopiert werden soll.
  • Hängen Sie das Textfeld an das DOM an.
  • Wählen Sie den Text in der Textfläche aus.
  • Rufen Sie document.execCommand ("kopieren")
  • Entfernen Sie das Textfeld aus dem Dom.

Hinweis: Sie werden das Textfeld nicht sehen, da es 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 Event-Handler wie Click (wie beim Öffnen von Fenstern) aufgerufen werden.
  • Der Internet Explorer zeigt beim ersten Mal, wenn die Zwischenablage aktualisiert wird, einen Berechtigungsdialog an.
  • IE und Edge scrollen, wenn der Textbereich fokussiert ist.
  • execCommand () kann in einigen Fällen werfen.
  • Newlines und Tabs können verschluckt werden, wenn Sie nicht ein Textfeld verwenden. (Die meisten Artikel scheinen ein div zu empfehlen)
  • Der Textbereich wird sichtbar sein, während der IE-Dialog angezeigt wird. Sie müssen ihn entweder ausblenden oder die IE-spezifische ClipboardData-API verwenden.
  • In IE 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 finden oder Vorschläge zur Verbesserung 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 IE 10+.
// IE: 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) {
        // IE 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 MS 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/


194
2017-11-26 00:03



Wenn Sie eine wirklich einfache Lösung (dauert weniger als 5 Minuten zu integrieren) und sieht gut aus der Box, dann ist Clippy eine gute Alternative zu einigen der komplexeren Lösungen.

Clippy

Es wurde von einem Mitbegründer von Github geschrieben. Beispiel 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 zu ersetzen #{text} mit dem Text, den Sie kopieren müssen, und #{bgcolor} mit einer Farbe.


93
2017-10-17 14:40



Das Lesen und Ändern der Zwischenablage von einer Webseite wirft Bedenken hinsichtlich Sicherheit und Datenschutz auf. Im Internet Explorer ist dies jedoch möglich. ich habe das gefunden Beispielschnipsel:

    <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" />


77
2017-12-30 13:33



Ich habe kürzlich eine geschrieben Technischer Blogbeitrag zu diesem Problem (Ich arbeite bei Lucidchart und wir haben vor kurzem eine Zwischenablage gemacht).

Das Kopieren von Klartext in die Zwischenablage ist relativ einfach, vorausgesetzt, Sie möchten es während eines Systemkopiervorgangs tun (der Benutzer drückt) StrgC oder nutzt das Browser-Menü).

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

Es ist viel schwieriger, Text während eines Systemkopiereignisses in die Zwischenablage zu schreiben. Es sieht so aus, als ob einige dieser anderen Antworten Wege beschreiben, dies über Flash zu tun, was der einzige browserübergreifende Weg ist (soweit ich das verstehe).

Darüber hinaus gibt es einige Optionen für jeden einzelnen Browser.

Dies ist das einfachste in IE, wo Sie jederzeit auf das Objekt clipboardData zugreifen können:

window.clipboardData

(Wenn Sie dies jedoch außerhalb eines Systems tun, ausschneiden, kopieren oder einfügen, fordert der IE den Benutzer auf, der Zwischenablage die Berechtigung für die Webanwendung zu erteilen.)

In Chrome können Sie eine Chrome-Erweiterung erstellen, die Ihnen zur Verfügung steht Zwischenablage Berechtigungen (Dies ist, was wir für Lucidchart tun). Dann müssen Sie für Benutzer mit Ihrer Erweiterung nur das Systemereignis selbst auslösen:

document.execCommand('copy');

Es sieht so aus, als hätte Firefox einige Optionen Damit können Benutzer bestimmten Websites Berechtigungen für den Zugriff auf die Zwischenablage erteilen. Ich habe jedoch keine dieser Methoden persönlich ausprobiert.


65
2017-12-03 20:31



clipboard.js ist ein kleines, nicht flashbares Dienstprogramm, das das Kopieren von Text- oder HTML-Daten in die Zwischenablage ermöglicht. Es ist sehr einfach zu verwenden, schließen Sie einfach die .js ein und verwenden Sie so etwas:

<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 ebenfalls aktiv GitHub


44
2017-08-11 15:33



ZeroClipboard ist die beste Cross-Browser-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


35
2017-11-21 20:41



Hier ist meine Meinung zu diesem ..

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

29
2017-09-14 09:20



Von einem der Projekte, an denen ich gearbeitet habe, ist ein jQuery Copy-to-Clipboard Plug-in, das die Null Zwischenablage Bibliothek.

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


25
2018-05-03 22:17