web-dev-qa-db-de.com

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

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

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

2858

Überblick

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

  1. Async Clipboard API[navigator.clipboard.writeText]
    • Textfokussierter Teil verfügbar in Chrome 66 (März 2018)
    • Der Zugriff erfolgt asynchron und verwendet JavaScript-Zusagen , kann geschrieben werden, damit Sicherheitsbenutzer-Eingabeaufforderungen (falls angezeigt) das JavaScript in der Seite nicht unterbrechen.
    • Text kann direkt aus einer Variablen in die Zwischenablage kopiert werden.
    • Wird nur auf Seiten unterstützt, die über HTTPS bereitgestellt werden.
    • In Chrome 66 Seiten in aktiven Registerkarten können ohne Berechtigungsaufforderung in die Zwischenablage geschrieben werden.
  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 der Vorgang abgeschlossen ist, einschließlich der Anzeige und der Interaktion des Benutzers mit Sicherheitsaufforderungen.
    • Der Text wird aus dem DOM gelesen und in die Zwischenablage gestellt.
    • Während des Testens ~ April 2015 wurde festgestellt, dass nur Internet Explorer beim Schreiben in die Zwischenablage Eingabeaufforderungen für Berechtigungen anzeigt.
  3. Überschreiben des Kopierereignisses
    • Weitere Informationen finden Sie in der Dokumentation zur Zwischenablage-API unter Überschreiben des Kopierereignisses .
    • Ermöglicht es Ihnen, die Anzeige in der Zwischenablage von jedem Kopierereignis aus zu ändern und andere Datenformate als Nur-Text einzuschließen.
    • Wird hier nicht behandelt, da die Frage nicht direkt beantwortet wird.

Allgemeine Entwicklungshinweise

Erwarten Sie nicht, dass Befehle für die Zwischenablage funktionieren, während Sie Code in der Konsole testen. Im Allgemeinen muss die Seite aktiv sein (API für die asynchrone Zwischenablage) oder eine Benutzerinteraktion erfordern (z. B. Klicken eines Benutzers), damit (document.execCommand('copy')) auf die Zwischenablage zugreifen kann. Weitere Informationen finden Sie weiter unten.

Async + Fallback

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

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 Stack Overflow nicht richtig funktioniert. Probieren Sie es hier aus: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors=1011

Async Clipboard API

Beachten Sie, dass es die Möglichkeit gibt, über die Berechtigungs-API in Chrome 66 "eine Berechtigung anzufordern" und 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.execCommand ('copy')

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

Browser-Unterstützung

Die Unterstützung für JavaScript document.execCommand('copy') wurde erweitert. Unter den folgenden Links finden Sie Informationen zu 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 Eingaben anzuzeigen

Das obige einfache Beispiel funktioniert hervorragend, wenn ein textarea oder input Element auf dem Bildschirm sichtbar ist.

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 die Umgehung dieses Problems (Element einfügen, in die Zwischenablage kopieren, Element entfernen):

Getestet mit Google Chrome 44, Firefox 42.0a1 und Internet Explorer 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
  // 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. Klicken Sie auf Ereignishandler. Dies ist eine Maßnahme, um ein Durcheinander mit der Zwischenablage des Benutzers zu verhindern, wenn er dies nicht erwartet.

Weitere Informationen finden Sie im Google Developers-Beitrag hier .

Zwischenablage-API

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

Wird es unterstützt?

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

Als Beispiel für Browser-Kompatibilitätsprobleme gab Google Chrome von ~ April bis ~ Oktober 2015 nur true von document.queryCommandSupported('copy') zurück, wenn der Befehl von a aufgerufen wurde Benutzerinitiierter Thread.

Beachten Sie die Kompatibilitätsdetails unten.

Browser-Kompatibilitätsdetails

Während ein einfacher Aufruf von document.execCommand('copy'), der in einen try/catch -Block eingebunden ist, der als Ergebnis eines Benutzer-Klicks aufgerufen wurde, Ihnen die bestmögliche Kompatibilität bietet, hat das Folgende einige Vorbehalte:

Jeder Aufruf von document.execCommand, document.queryCommandSupported Oder document.queryCommandEnabled Sollte in einen try/catch -Block eingeschlossen werden.

Verschiedene Browserimplementierungen und Browserversionen lösen beim Aufruf unterschiedliche Ausnahmetypen aus, anstatt false zurückzugeben.

Verschiedene Browser-Implementierungen sind noch im Fluss und die Zwischenablage-API ist noch in Arbeit. Denken Sie also daran, Ihre Tests durchzuführen.

1947
Dean Taylor

Das automatische Kopieren in die Zwischenablage kann gefährlich sein, daher machen es die meisten Browser (außer IE) sehr schwierig. Persönlich benutze 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 zu drücken Ctrl+C und Enter (um die Schachtel zu schließen) - und voila!

Jetzt ist der Kopiervorgang in der Zwischenablage SICHER, da der Benutzer ihn manuell ausführt (aber 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>
1228
Jarek Milewski

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

  • Erstellen Sie einen Textbereich und legen Sie für den Inhalt den Text fest, 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.
  • Document.execCommand aufrufen ("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 (wie beim Öffnen von Fenstern) aufgerufen werden.
  • IE zeigt ein Berechtigungsdialogfeld an, wenn die Zwischenablage zum ersten Mal aktualisiert wird.
  • IE und Edge werden gescrollt, wenn der Textbereich scharfgestellt ist.
  • execCommand () kann in einigen Fällen werfen.
  • Zeilenumbrüche und Registerkarten können verschluckt werden, sofern Sie keine Textbereiche verwenden. (Die meisten Artikel scheinen die Verwendung eines div zu empfehlen.)
  • Der Textbereich wird angezeigt, 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 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 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/

221
Greg Lowe

Wenn Sie eine wirklich einfache Lösung wünschen (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:

<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} durch den zu kopierenden Text und #{bgcolor} durch eine Farbe zu ersetzen.

93
Brent Matzelle

Das Lesen und Ändern der Zwischenablage von einer Webseite wirft Sicherheits- und Datenschutzprobleme auf. In Internet Explorer ist es jedoch möglich. Ich habe diesen Beispielausschnitt 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" />

80
bandi

Ich habe kürzlich einen technischen Blog-Beitrag zu diesem Problem geschrieben (ich arbeite bei Lucidchart und wir haben kürzlich eine Überarbeitung unserer Zwischenablage durchgeführt).

Das Kopieren von einfachem Text in die Zwischenablage ist relativ einfach, vorausgesetzt, Sie möchten dies während eines Systemkopiervorgangs tun (Benutzer drückt CtrlC oder über 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();
});

Das Einfügen von Text in die Zwischenablage, nicht während eines Systemkopiervorgangs, ist wesentlich schwieriger. Wie es aussieht, verweisen einige dieser anderen Antworten auf Möglichkeiten, dies über Flash zu tun. Dies ist meines Wissens die einzige browserübergreifende Möglichkeit, dies zu tun.

Ansonsten gibt es einige Optionen für jeden Browser einzeln.

Dies ist die einfachste Methode in IE, bei der Sie jederzeit über JavaScript auf das clipboardData-Objekt zugreifen können:

window.clipboardData

(Wenn Sie dies außerhalb eines Ereignisses zum Ausschneiden, Kopieren oder Einfügen des Systems versuchen, fordert IE den Benutzer 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). Dann müssen Sie für Benutzer mit installierter Erweiterung nur das Systemereignis selbst auslösen:

document.execCommand('copy');

Es sieht so aus, als hätte Firefox einige Optionen , mit denen Benutzer bestimmten Websites Berechtigungen für den Zugriff auf die Zwischenablage erteilen können, aber ich habe keines davon persönlich ausprobiert.

67
Richard Shurtz

Hier ist meine Meinung 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;
 }
44
nikksan

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 ein und verwenden Sie etwas wie das Folgende:

<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 nach hier .

44
a coder

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 Nicht-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

34
Justin

Aus einem der Projekte, an denen ich gerade gearbeitet habe, einem jQuery-Plug-in für das Kopieren in die Zwischenablage, das die Zero Clipboard library verwendet.

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

25
SteamDev

Ich habe folgende Lösung gefunden:

Beim Herunterfahren der Taste wird der "pre" -Tag erstellt. Wir legen den Inhalt so fest, dass er in dieses Tag kopiert werden soll, wählen dann dieses Tag aus und geben im Handler den Wert true zurück. Dies ruft den Standard-Handler von Chrome auf und kopiert den ausgewählten Text.

Falls erforderlich, können Sie das Timeout für die Wiederherstellung der vorherigen Auswahl festlegen. Meine Implementierung bei 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 werden Textbereiche erstellt und auf dieselbe Weise ausgeführt.

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.

21
Enyby

Geesh, nicht sicher, warum noch niemand darauf hingewiesen hat.

Im Jahr 2018, Leute, hier ist, wie Sie es angehen können:

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

Wird in meinem Angular 6+-Code wie folgt verwendet:

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

Wenn ich einen String übergeben, kopiert er ihn. Wenn nichts, kopiert die URL der Seite.

Weitere Gymnastik in der Zwischenablage ist ebenfalls möglich. Weitere Informationen finden Sie hier:

https://developers.google.com/web/updates/2018/03/clipboardapi

21
Rexford

Die anderen Methoden kopieren Nur-Text in die Zwischenablage. Um HTML zu kopieren (dh Sie können Ergebnisse in einen WSIWYG-Editor einfügen), können Sie in IE ONLY 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();   
19
Chase Seibert

Ich benutze das sehr erfolgreich ( ohne jquery oder irgendein 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

Registerkarten werden in Leerzeichen umgewandelt (zumindest in Chrom).

18
Peter Rader

Seit kurzem unterstützen Chrome 42+ und Firefox 41+ den Befehl document.execCommand ('copy'). Also habe ich ein paar Funktionen für das Cross-Browser-Kopieren in die Zwischenablage erstellt, wobei eine Kombination aus Tim Downs alter Antwort und Google Developers Antwort verwendet wurde:

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-IE
        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 IE 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>

18
Jeff Baker

  <!DOCTYPE html>

  <style>
    #t {
      width: 1px
      height: 1px
      border: none
    }
    #t:focus {
      outline: none
    }
  </style>

  <script>
    function copy(text) {
      var t = document.getElementById('t')
      t.innerHTML = text
      t.select()
      try {
        var successful = document.execCommand('copy')
        var msg = successful ? 'successfully' : 'unsuccessfully'
        console.log('text coppied ' + msg)
      } catch (err) {
        console.log('Unable to copy text')
      }
      t.innerHTML = ''
    }
  </script>

  <textarea id=t></textarea>

  <button onclick="copy('hello world')">
    Click me
  </button>

12
Samuel Tees

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

Die Lösung besteht darin, ein Flash-Objekt über der Schaltfläche "Kopieren" oder eines anderen Elements, das die Kopie einleitet, übermäßig zu behandeln. Zero Clipboard ist derzeit die beste Bibliothek mit dieser Implementierung. Erfahrene Flash-Entwickler möchten möglicherweise nur eine eigene Bibliothek erstellen.

12
matthuhiggins

Ich habe folgende Lösung gefunden:

Ich habe den Text in einer versteckten Eingabe. Da setSelectionRange für ausgeblendete Eingaben nicht funktioniert, 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 dessen 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;
    }
11
Vassilis Pallas

Kopieren Sie Text aus 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 IE9 und früheren Versionen nicht unterstützt.

Source: W3Schools - Text in Zwischenablage kopieren

10
Alexandru Sirbu

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

  • Verwendet cssText, um Ausnahmen in IE im Gegensatz zum direkten Stil zu vermeiden.
  • Stellt die Auswahl wieder her, wenn es eine gab
  • Legt fest, dass die Tastatur auf mobilen Geräten nicht angezeigt wird
  • Hat eine Problemumgehung für iOS, sodass es tatsächlich funktioniert, da 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.
    // https://stackoverflow.com/questions/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) {
      return false;
    }
  };
})();
10
Dominic

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

9
Quog

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

Lösung: Erstellen Sie ein Textfeld, in das Sie Daten einfügen, die der Benutzer kopieren soll (für mich, wenn der Benutzer Zellen auswählt), und legen Sie den Fokus darauf (z. B., wenn der Benutzer drückt) Ctrl) und markieren Sie den gesamten Text.

Also, wenn der Benutzer getroffen hat Ctrl + C er/sie erhält kopierte Zellen, die er/sie ausgewählt hat. Nach dem Test habe ich 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 dies auch tun (je nach Ziel) - Konzentrieren Sie sich weiterhin auf Textbereiche und erfassen Sie Einfügeereignisse mithilfe von Onpaste (in meinem Projekt verwende ich Textbereiche in Zellen zum Bearbeiten).

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

8
xiniu

Ich habe clipboard.js verwendet

wir können es auf npm bekommen

npm install clipboard --save

und auch auf Laube

bower install clipboard --save

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

7
CodecPM

Viele Antworten bereits, aber ich füge gerne eine (jQuery) hinzu. Funktioniert wie ein Zauber in jedem Browser, auch in mobilen (dh Aufforderungen zur Sicherheit, aber wenn Sie damit einverstanden sind, funktioniert es einfach gut).

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.'); }
7
Codebeat

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 im 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');
}
6
Oliver Bock

Dies war das einzige, was ich je arbeiten konnte, nachdem ich im Internet verschiedene Wege gesucht hatte. Dies ist ein unordentliches Thema. Viele Lösungen, die auf der ganzen Welt veröffentlicht werden und die meisten funktionieren NICHT. Das hat für mich funktioniert:

ANMERKUNG: Dieser Code funktioniert nur, wenn er als direkter synchroner Code für eine 'onClick'-Methode ausgeführt wird. Wenn Sie eine asynchrone Antwort auf ajax oder auf eine andere asynchrone Art und Weise aufrufen, funktioniert sie 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();
}

Ich weiß, dass dieser Code eine 1px breite Komponente sichtbar für eine Millisekunde auf dem Bildschirm anzeigen wird, entschied sich jedoch, sich keine Sorgen darüber zu machen.

5
user2080225

Es scheint, dass ich die Frage falsch verstanden habe, aber als Referenz können Sie einen Bereich des DOM extrahieren (nicht in die Zwischenablage kopieren; kompatibel mit allen modernen Browsern) und ihn mit den Ereignissen oncopy und onpaste und 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;
  }
}
5
mrBorna

Dies ist eine Kombination aus den anderen Antworten.

var copyToClipboard = function(textToCopy){
    $("body")
        .append($('<input type="text" 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 nur jQuery zu meiner 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 Inline-Styling machen

.append($('<input type="text" name="fname" style="opacity: 0;  position: absolute;" class="textToCopyInput"/>' )
5
Bart Burg

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>
5
dvallejo

Um einen ausgewählten Text ('Text To Copy') in Ihre Zwischenablage zu kopieren, erstellen Sie ein Bookmarklet (Browser-Lesezeichen, das Javsacript ausführt) und führen Sie es aus (klicken Sie darauf) . Es wird eine temporäre Textfläche 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');
5
Mau

Ich musste den Text ohne Eingabefelder (Text innerhalb eines div/span-Tags) von der Seite kopieren und erhielt folgenden Code. Der einzige Trick besteht darin, ein ausgeblendetes Feld zu haben, aber als Typ TEXT funktioniert es nicht mit ausgeblendetem Typ. 

    function copyToClipboard(sID) {
        var aField = document.getElementById("hiddenField");

        aField.hidden   = false;
        aField.value    = document.getElementById(sID).textContent;
        aField.select();
        document.execCommand("copy");
        alert("Following text has been copied to the clipboard.\n\n" + aField.value);
        aField.hidden = true;
    }

Und fügen Sie im HTML-Code Folgendes hinzu

input type = "text" id = "hiddenField" style = "width: 5px; border: 0" /> ...

4
NewToIOS

Sieht so aus, als hätten Sie den Code von Greasemonkey\JavaScript in die Zwischenablage kopieren oder aus dem ursprünglichen Quellcode dieses Snippets ...

Dieser Code war für Greasemonkey, daher das unsafeWindow. Ich glaube, der Syntaxfehler in IE kommt vom const-Schlüsselwort, das für Firefox spezifisch ist (ersetzen Sie es durch var).

4
PhiLho

Soweit ich weiß, funktioniert das nur in Internet Explorer.

Siehe auch Dynamische Werkzeuge - JavaScript in Zwischenablage kopieren, aber der Benutzer muss zuerst die Konfiguration ändern, und selbst dann scheint es nicht zu funktionieren.

4
Stormenet

Aus Sicherheitsgründen können Sie das nicht tun. Sie müssen Flash zum Kopieren in die Zwischenablage auswählen.

Ich schlage folgendes vor: http://zeroclipboard.org/

3
sinister

Update 2015: Derzeit gibt es eine Möglichkeit, document.execCommand zum Arbeiten mit der Zwischenablage zu verwenden clipboard.js bietet eine browserübergreifende Möglichkeit, mit der Zwischenablage zu arbeiten ( Browserunterstützung )

3

Ich wollte clipboard.js verwenden, aber es hat (noch) keine mobile Lösung vorhanden ... also schrieb ich eine super kleine Bibliothek:

https://github.com/ryanpcmcquen/cheval

Dadurch wird entweder der Text kopiert (Desktop/Android/Safari 10+) oder zumindest der Text (ältere Versionen von iOS) ausgewählt. Minimiert beträgt es etwas mehr als 1kB. In Desktop Safari (Drücken Sie zum Kopieren die Befehlstaste + C.) Sie müssen auch kein JavaScript schreiben, um es zu verwenden.

3
ryanpcmcquen

In Chrome können Sie copy('the text or variable etc') verwenden. Dies ist zwar nicht browserübergreifend (und funktioniert nicht in einem Snippet? ), Sie können es jedoch den anderen Browserübergreifenden Antworten hinzufügen.

2
drzaus

@Jimbo, hier ist die einfache Ajax/Session-basierte Zwischenablage für dieselbe Website.

Beachten Sie, dass die Sitzung aktiviert und gültig sein muss und diese Lösung für denselben Standort funktioniert. Ich habe es auf CodeIgniter getestet, aber ich hatte ein Session/Ajax-Problem, aber this löste dieses Problem ebenfalls. Wenn Sie nicht mit Sitzungen spielen möchten, verwenden Sie eine Datenbanktabelle.

JavaScript/jQuery

<script type="text/javascript">
    $(document).ready(function() {

        $("#copy_btn_id").click(function(){

            $.post("<?php echo base_url();?>ajax/foo_copy/"+$(this).val(), null,
                function(data){
                    // Copied successfully
                }, "html"
            );
        });

        $("#paste_btn_id").click(function() {

           $.post("<?php echo base_url();?>ajax/foo_paste/", null,
               function(data) {
                   $('#paste_btn_id').val(data);
               }, "html"
           );
        });
    });
</script>

HTML-Inhalt

<input type='text' id='copy_btn_id' onclick='this.select();'  value='myvalue' />
<input type='text' id='paste_btn_id' value='' />

PHP Code

<?php
    class Ajax extends CI_Controller {

        public function foo_copy($val){
            $this->session->set_userdata(array('clipboard_val' => $val));
        }

        public function foo_paste(){
            echo $this->session->userdata('clipboard_val');
            exit();
        }
    }
?>
2
Saad

Neben der aktualisierten Antwort von Dean Taylor (Juli 2015) schrieb ich eine jQuery-Methode, die seinem Beispiel ähnelte.

jsFiddle

/**
* Copies the current selected text to the SO clipboard
* This method must be called from an event to work with `execCommand()`
* @param {String} text Text to copy
* @param {Boolean} [fallback] Set to true shows a Prompt
* @return Boolean Returns `true` if the text was copied or the user clicked on accept (in Prompt), `false` otherwise
*/
var CopyToClipboard = function(text, fallback){
    var fb = function () {
        $t.remove();
        if (fallback !== undefined && fallback) {
            var fs = 'Please, copy the following text:';
            if (window.Prompt(fs, text) !== null) return true;
        }
        return false;
    };
    var $t = $('<textarea />');
    $t.val(text).css({
        width: '100px',
        height: '40px'
    }).appendTo('body');
    $t.select();
    try {
        if (document.execCommand('copy')) {
            $t.remove();
            return true;
        }
        fb();
    }
    catch (e) {
        fb();
    }
};
2
kosmos

Wenn Sie Text aus der Zwischenablage in einer Chrome-Erweiterung lesen und die Berechtigung 'Zwischenablage lesen' haben, können Sie den folgenden Code verwenden:

function readTextFromClipboardInChromeExtension() {
    var ta = $('<textarea/>');
    $('body').append(ta);
    ta.focus();
    document.execCommand('paste');
    var text = ta.val();
    ta.blur();
    ta.remove();
    return text;
}
2
supNate

Wenn Sie die Javascript-Funktion mit try/catch verwenden, können Sie sogar die Fehlerbehandlung verbessern:

 copyToClipboard() {
     let el = document.getElementById('Test').innerText
     el.focus(); // el.select();
     try {
         var successful = document.execCommand('copy');
         if (successful) {
             console.log('Copied Successfully! Do whatever you want next');
         } else {
             throw ('Unable to copy');
         }
     } catch (err) {
         console.warn('Oops, Something went wrong ', err);
     }
 }
2
Adeel Imran

Wenn der kopierte Link auf derselben Site eingefügt werden muss, können Sie den Text vor dem Drücken der einfachen HTML-Schaltfläche "Kopieren" markieren und dann den Textinhalt in einer Sitzung speichern. Und wo immer es eingefügt werden soll, gibt es eine Schaltfläche zum Einfügen. 

** Ich weiß, es ist keine dauerhafte und universelle Lösung, aber es ist etwas :)

2
Saad

Ich habe einige Funktionen in einer einfachen Lösung zusammengestellt, die alle Fälle abdeckt, falls erforderlich mit Fallrückmeldung.

window.copyToClipboard = function(text) {
  // IE specific
  if (window.clipboardData && window.clipboardData.setData) {
    return clipboardData.setData("Text", text);
  }

  // all other modern
  target = document.createElement("textarea");
  target.style.position = "absolute";
  target.style.left = "-9999px";
  target.style.top = "0";
  target.textContent = text;
  document.body.appendChild(target);
  target.focus();
  target.setSelectionRange(0, target.value.length);

  // copy the selection of fall back to Prompt
  try {
    document.execCommand("copy");
    target.remove();
    console.log('Copied to clipboard: "'+text+'"');
  } catch(e) {
    console.log("Can't copy string on this browser. Try to use Chrome, Firefox or Opera.")
    window.Prompt("Copy to clipboard: Ctrl+C, Enter", text);
  }
}

Testen Sie es hier https://jsfiddle.net/jv0avz65/

1
dux

Nach der Suche nach einer Lösung, die Safari und andere Browser unterstützt (IE9 +),

Ich benutze das gleiche wie Github: ZeroClipboard

Beispiel:

http://zeroclipboard.org/index-v1.x.html

HTML

<html>
  <body>
    <button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
    <script src="ZeroClipboard.js"></script>
    <script src="main.js"></script>
  </body>
</html>

JS

var client = new ZeroClipboard(document.getElementById("copy-button"));

client.on("ready", function (readyEvent) {
    // alert( "ZeroClipboard SWF is ready!" );

    client.on("aftercopy", function (event) {
        // `this` === `client`
        // `event.target` === the element that was clicked
        event.target.style.display = "none";
        alert("Copied text to clipboard: " + event.data["text/plain"]);
    });
});
1
user4912329

Fügen Sie einfach meine Antworten hinzu. 

Es ist das Beste. So viel zu gewinnen. 

var toClipboard = function(text) {
        var doc = document;

        // Create temp element
        var textarea = doc.createElement('textarea');
        textarea.style.position = 'absolute';
        textarea.style.opacity  = '0';
        textarea.textContent    = text;

        doc.body.appendChild(textarea);

        textarea.focus();
        textarea.setSelectionRange(0, textarea.value.length);

        // copy the selection
        var success;
        try {
                success = doc.execCommand("copy");
        } catch(e) {
                success = false;
        }

        textarea.remove();

        return success;
}
1
momomo

Dies war das einzige, was für mich funktionierte:

let textarea = document.createElement('textarea');
textarea.setAttribute('type', 'hidden');
textarea.textContent = 'the string you want to copy';
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
1
Alexander Mills

Ich habe die von @ dean-taylor präsentierte Lösung zusammen mit einem anderen Auswahl-/Auswahlcode an anderer Stelle in ein auf NPM verfügbares jQuery-Plugin zusammengestellt:

https://www.npmjs.com/package/jquery.text-select

Installieren:

npm install --save jquery.text-select

Verwendungszweck:

<script>
    $(document).ready(function(){
        $("#selectMe").selectText(); // Hightlight / select the text
        $("#selectMe").selectText(false); // Clear the selection

        $("#copyMe").copyText(); // Copy text to clipboard
    });
</script>

Weitere Informationen zu Methoden/Ereignissen finden Sie auf der NPM-Registrierungsseite.

0
Gruffy

Mit document.execCommand erledigen Sie die Arbeit für Sie ...

Damit können Sie auch cut, copy und paste ausführen ...

Dies ist eine einfache Kopierfunktion der Zwischenablage, die alles aus dem Eingabetext kopiert ...

function copyInputText() {
  var copyText = document.querySelector("#input");
  copyText.select();
  document.execCommand("copy");
}

document.querySelector("#copy").addEventListener("click", copyInputText);
<input id="input" type="text" />
<button id="copy">Copy</button>

Für weitere Informationen besuchen Sie hier

0
Alireza

Hier ist ein einfaches Beispiel;)

<!DOCTYPE html>
<html>
<body>

<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>

<p>The document.execCommand() method is not supported in IE8 and earlier.</p>

<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}
</script>

</body>
</html>
0
Lars Gross

Dies kann nur durch die Kombination von getElementbyId, Select (), blur () und copy ausgeführt werden

Hinweis

select () wählt den gesamten Text eines Elements oder eines Elements mit einem Textfeld aus. Dies funktioniert möglicherweise nicht für eine Schaltfläche

Verwendungszweck

let copyText = document.getElementById('input-field');
copyText.select()
document.execCommand("copy");
copyReferal.blur()
document.getElementbyId('help-text').textContent = 'Copied'

Die blur () -Methode entfernt hässlich hervorgehobene Bereiche, anstatt dass Sie bei einer schönen Nachricht anzeigen können, dass Ihr Inhalt wurde erfolgreich kopiert

0
Nishant Singh

Hier ist eine elegante Lösung für Angular 5.x +:

Komponente:

import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ElementRef,
  EventEmitter,
  Input,
  OnInit,
  Output,
  Renderer2,
  ViewChild
} from '@angular/core';

@Component({
  selector: 'copy-to-clipboard',
  templateUrl: './copy-to-clipboard.component.html',
  styleUrls: ['./copy-to-clipboard.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class CopyToClipboardComponent implements OnInit {
  @ViewChild('input') input: ElementRef;
  @Input() size = 'md';
  @Input() theme = 'complement';
  @Input() content: string;
  @Output() copied: EventEmitter<string> = new EventEmitter<string>();
  @Output() error: EventEmitter<string> = new EventEmitter<string>();

  constructor(private renderer: Renderer2) {}

  ngOnInit() {}

  copyToClipboard() {

    const rootElement = this.renderer.selectRootElement(this.input.nativeElement);

    // iOS Safari blocks programmtic execCommand copying normally, without this hack.
    // https://stackoverflow.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios
    if (navigator.userAgent.match(/ipad|iPod|iphone/i)) {

      this.renderer.setAttribute(this.input.nativeElement, 'contentEditable', 'true');

      const range = document.createRange();

      range.selectNodeContents(this.input.nativeElement);

      const sel = window.getSelection();

      sel.removeAllRanges();
      sel.addRange(range);

      rootElement.setSelectionRange(0, 999999);
    } else {
      rootElement.select();
    }

    try {
      document.execCommand('copy');
      this.copied.emit();
    } catch (err) {
      this.error.emit(err);
    }
  };
}

Vorlage:

<button class="btn btn-{{size}} btn-{{theme}}" type="button" (click)="copyToClipboard()">
  <ng-content></ng-content>
</button>

<input #input class="hidden-input" [ngModel]="content">

Styles:

.hidden-input {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px; 
  height: 1px;
  padding: 0;
  border: 0;
  box-shadow: none;
  outline: none;
  background: transparent;
}
0
Chrillewoodz

Ich habe viele Lösungen ausprobiert. Wenn es in modernen Browsern funktioniert, funktioniert es nicht im IE. Wenn es im IE funktioniert, wird es nicht in iOS. Endlich haben sie alle gepflegt und sind zu dem unten stehenden Fix gekommen, der in allen Browsern, iOS, Webview und Android funktioniert.

Hinweis: Behandelte auch das Szenario, in dem der Benutzer die Berechtigung für die Zwischenablage verweigert. Außerdem wird die Meldung "Link kopiert" angezeigt, auch wenn der Benutzer manuell kopiert.

<div class="form-group col-md-12">
<div class="input-group col-md-9">
    <input name="copyurl"
           type="text"
           class="form-control br-0 no-focus"
           id="invite-url"
           placeholder="http://www.invitelink.com/example"
           readonly>
    <span class="input-group-addon" id="copy-link" title="Click here to copy the invite link">
        <i class="fa fa-clone txt-18 text-success" aria-hidden="true"></i>
    </span>
</div>
<span class="text-success copy-success hidden">Link copied.</span>

Skript:

var addEvent =  window.attachEvent || window.addEventListener;
var event = 'copy';
var $inviteUrl = $('#invite-url');

$('#copy-link').on('click', function(e) {
    if ($inviteUrl.val()) {
        if (navigator.userAgent.match(/ipad|iPod|iphone/i)) {
            var el = $inviteUrl.get(0);
            var editable = el.contentEditable;
            var readOnly = el.readOnly;
            el.contentEditable = true;
            el.readOnly = false;
            var range = document.createRange();
            range.selectNodeContents(el);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
            el.setSelectionRange(0, 999999);
            el.contentEditable = editable;
            el.readOnly = readOnly;
            document.execCommand('copy');
            $inviteUrl.blur();
        } else {
            $inviteUrl.select();
            document.execCommand("copy");
        }
    }
});

addEvent(event, function(event) {
    if ($inviteUrl.val() && event.target.id == 'invite-url') {
        var $copyLink = $('#copy-link i');
        $copyLink.removeClass('fa-clone');
        $copyLink.addClass('fa-check');
        $('.copy-success').removeClass('hidden');
        setTimeout(function() {
            $copyLink.removeClass('fa-check');
            $copyLink.addClass('fa-clone');
            $('.copy-success').addClass('hidden');
        }, 2000);
    }
});
0
Renga

Hier ist meine Lösung

var codeElement = document.getElementsByClassName("testelm") && document.getElementsByClassName("testelm").length ? document.getElementsByClassName("testelm")[0] : "";
        if (codeElement != "") {
            var e = document.createRange();
            e.selectNodeContents(codeElement);
            var selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(e);
            document.execCommand("Copy");
            selection.removeAllRanges();
        }
0
Adithya Sai