Kopieren / Einfügen von Text in die Zwischenablage mit FireFox, Safari und Chrome

In Internet Explorer kann ich mit dem Objekt clipboardData auf die Zwischenablage zugreifen. Wie kann ich das in FireFox, Safari und / oder Chrome tun?

Es gibt jetzt eine Möglichkeit, dies in den meisten modernen Browsern mit einfach zu tun

document.execCommand('copy');

Dadurch wird der aktuell ausgewählte Text kopiert. Sie können eine textArea oder ein Eingabefeld mit auswählen

document.getElementById('myText').select();

Um Text unsichtbar zu kopieren, können Sie schnell eine textArea generieren, den Text im Feld ändern, ihn auswählen, kopieren und dann die textArea löschen. In den meisten Fällen blinkt diese textArea nicht einmal auf dem Bildschirm.

Aus Sicherheitsgründen können Sie in Browsern nur kopieren, wenn ein Benutzer eine Aktion ausführt (dh auf eine Schaltfläche klickt). Eine Möglichkeit, dies zu tun, besteht darin, einer HTML-Schaltfläche ein onClick-Ereignis hinzuzufügen, das eine Methode aufruft, die den Text kopiert.

Ein vollständiges Beispiel:

function copier(){
  document.getElementById('myText').select();
  document.execCommand('copy');
}

<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>

Aus Sicherheitsgründen können Sie in Firefox keinen Text in die Zwischenablage einfügen. Es gibt jedoch eine Problemumgehung mit Flash.

function copyIntoClipboard(text) {

    var flashId = 'flashId-HKxmj5';

    /* Replace this with your clipboard.swf location */
    var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';

    if(!document.getElementById(flashId)) {
        var div = document.createElement('div');
        div.id = flashId;
        document.body.appendChild(div);
    }
    document.getElementById(flashId).innerHTML = '';
    var content = '<embed src="' + 
        clipboardSWF +
        '" FlashVars="clipboard=' + encodeURIComponent(text) +
        '" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashId).innerHTML = content;
}

Der einzige Nachteil ist, dass hierfür Flash aktiviert sein muss.

Quelle ist derzeit tot: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ ( und so ist es Google Cache )

Online-Tabellenkalkulationen verknüpfen Strg + C-, Strg + V-Ereignisse und übertragen den Fokus auf ein verstecktes TextArea-Steuerelement. Setzen Sie den Inhalt entweder auf den gewünschten neuen Inhalt der Zwischenablage zum Kopieren oder lesen Sie den Inhalt, nachdem das Ereignis zum Einfügen beendet wurde.

Siehe auch Ist es möglich, die Zwischenablage in Firefox, Safari und Chrome mit Javascript zu lesen?

Es ist Sommer 2015, und mit so viel Aufruhr um Flash dachte ich, ich würde dieser Frage eine neue Antwort hinzufügen, die ihre Verwendung insgesamt vermeidet.

clipboard.js ist ein nettes Dienstprogramm, mit dem Sie Text- oder HTML-Daten in die Zwischenablage kopieren 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

2017 können Sie dies tun (sagen Sie dies, weil dieser Thread fast 9 Jahre alt ist!)

function copyStringToClipboard (string) {
    function handler (event){
        event.clipboardData.setData('text/plain', string);
        event.preventDefault();
        document.removeEventListener('copy', handler, true);
    }

    document.addEventListener('copy', handler, true);
    document.execCommand('copy');
}

Und jetzt zum Kopieren copyStringToClipboard('Hello World')

Wenn Sie die setDataZeile bemerkt haben und sich gefragt haben, ob Sie verschiedene Datentypen festlegen können, lautet die Antwort Ja.

In Firefox können Sie zwar Daten in der Zwischenablage speichern, diese sind jedoch aus Sicherheitsgründen standardmäßig deaktiviert. Informationen zum Aktivieren finden Sie unter "Gewähren von JavaScript-Zugriff auf die Zwischenablage" in der Mozilla Firefox-Wissensdatenbank.

Die von amdfan angebotene Lösung ist die beste, wenn Sie viele Benutzer haben und die Konfiguration ihres Browsers keine Option ist. Sie können jedoch testen, ob die Zwischenablage verfügbar ist, und einen Link zum Ändern der Einstellungen bereitstellen, wenn die Benutzer technisch versiert sind. Der JavaScript-Editor TinyMCE folgt diesem Ansatz.

Die Funktion copyIntoClipboard () funktioniert für Flash 9, scheint jedoch durch die Veröffentlichung von Flash Player 10 beschädigt zu werden. Hier ist eine Lösung, die mit dem neuen Flash Player funktioniert:

http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/

Es ist eine komplexe Lösung, aber sie funktioniert.

Ich muss sagen, dass keine dieser Lösungen wirklich funktioniert. Ich habe die Zwischenablage-Lösung anhand der akzeptierten Antwort ausprobiert und sie funktioniert nicht mit Flash Player 10. Ich habe auch ZeroClipboard ausprobiert und war eine Weile sehr zufrieden damit.

Ich verwende es derzeit auf meiner eigenen Website ( http://www.blogtrog.com ), aber ich habe seltsame Fehler damit bemerkt. ZeroClipboard funktioniert so, dass ein unsichtbares Flash-Objekt über einem Element auf Ihrer Seite platziert wird. Ich habe festgestellt, dass das ZeroClipboard-Flash-Objekt aus dem Gleichgewicht gerät und das Objekt nicht mehr abdeckt, wenn sich mein Element bewegt (z. B. wenn der Benutzer die Größe des Fensters ändert und die Dinge richtig ausgerichtet sind). Ich vermute, es sitzt wahrscheinlich immer noch dort, wo es ursprünglich war. Sie haben Code, der das stoppen oder auf das Element übertragen soll, aber es scheint nicht gut zu funktionieren.

Also ... in der nächsten Version von BlogTrog werde ich wohl mit allen anderen Code-Textmarkern, die ich in freier Wildbahn gesehen habe, nachziehen und meine Schaltfläche In Zwischenablage kopieren entfernen. :-(

(Ich habe festgestellt, dass die Kopie von dp.syntaxhiglighter in die Zwischenablage jetzt ebenfalls fehlerhaft ist.)

viel zu alte Frage, aber ich habe diese Antwort nirgendwo gesehen ...

Überprüfen Sie diesen Link:

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

Wie alle sagten, ist aus Sicherheitsgründen standardmäßig deaktiviert. Der obige Link zeigt die Anweisungen zum Aktivieren (durch Bearbeiten von about: config in Firefox oder der Datei user.js).

Glücklicherweise gibt es ein Plugin namens "AllowClipboardHelper", das die Sache mit nur wenigen Klicks einfacher macht. Sie müssen die Besucher Ihrer Website jedoch weiterhin anweisen, wie der Zugriff in Firefox aktiviert werden kann.

Verwenden Sie modern document.execCommand ("copy") und jQuery. Siehe diese Antwort zum Stapelüberlauf

var ClipboardHelper = { // as Object

copyElement: function ($element)
{
   this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
    var $tempInput =  $("<textarea>");
    $("body").append($tempInput);
    $tempInput.val(text).select();
    document.execCommand("copy");
    $tempInput.remove();
}};

So rufen Sie an:

 ClipboardHelper.copyText('Hello\nWorld');
 ClipboardHelper.copyElement($('body h1').first());

// JQUERY DOCUMENT
;(function ( $, window, document, undefined ) {
  
  var ClipboardHelper = {

    copyElement: function ($element)
    {
       this.copyText($element.text())
    },
    copyText:function(text) // Linebreaks with \n
    {
        var $tempInput =  $("<textarea>");
        $("body").append($tempInput);
      
        //todo prepare Text: remove double whitespaces, trim
        
        $tempInput.val(text).select();
        document.execCommand("copy");
        $tempInput.remove();
    }
};

    $(document).ready(function()
    {
         var $body=$('body');
         
        $body.on('click', '*[data-copy-text-to-clipboard]', function(event) 
        {
            var $btn=$(this);
            var text=$btn.attr('data-copy-text-to-clipboard');
            ClipboardHelper.copyText(text);
        });
      
        $body.on('click', '.js-copy-element-to-clipboard', function(event) 
        {
            ClipboardHelper.copyElement($(this));
        });

    });


})( jQuery, window, document );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span data-copy-text-to-clipboard=
"Hello
 World">
  Copy Text
</span>
<br><br>
<span class="js-copy-element-to-clipboard">
Hello
World 
Element
</span>

Ich habe Githubs Clippy für meine Bedürfnisse verwendet, einfache Flash-basierte Schaltfläche. Funktioniert einwandfrei, wenn man kein Styling benötigt und gerne einfügt, was vorher auf der Serverseite eingefügt werden soll.

Eine leichte Verbesserung gegenüber der Flash-Lösung besteht darin, Flash 10 mit swfobject zu erkennen:

http://code.google.com/p/swfobject/

Wenn es dann als Flash 10 angezeigt wird, versuchen Sie, ein Shockwave-Objekt mit Javascript zu laden. Shockwave kann (in allen Versionen) auch mit dem Befehl copyToClipboard () im Jargon in die Zwischenablage lesen / schreiben.

http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp funktioniert mit Flash 10 und allen Flash-fähigen Browsern.

Außerdem wurde ZeroClipboard aktualisiert, um den Fehler beim Scrollen von Seiten zu vermeiden, der dazu führt, dass sich der Flash-Film nicht mehr an der richtigen Stelle befindet.

Da diese Methode "erfordert", dass der Benutzer auf eine Schaltfläche klickt, um sie zu kopieren, ist dies für den Benutzer eine Annehmlichkeit und es tritt nichts Schändliches auf.

Versuchen Sie, eine globale Speichervariable zu erstellen, in der die Auswahl gespeichert ist. Dann kann die andere Funktion auf die Variable zugreifen und beispielsweise einfügen.

var memory = '';//outside the functions but within the script tag.

function moz_stringCopy(DOMEle,firstPos,secondPos) {

var copiedString = DOMEle.value.slice(firstPos, secondPos);
memory = copiedString;

}

function moz_stringPaste(DOMEle, newpos) {

    DOMEle.value = DOMEle.value.slice(0,newpos) + memory + DOMEle.value.slice(newpos);

}

Wenn Sie Flash unterstützen, können Sie https://everyplay.com/assets/clipboard.swf verwenden und den Flashvars-Text verwenden, um den Text festzulegen

https://everyplay.com/assets/clipboard.swf?text=It%20Works

Das ist die, die ich zum Kopieren verwende und die Sie als Extra festlegen können, wenn diese Optionen, die Sie verwenden können, nicht unterstützt werden:

Für Internet Explorer: window.clipboardData.setData (DataFormat, Text) und window.clipboardData.getData (DataFormat)

Sie können den Text und die URL des DataFormat verwenden, um Daten und SetData abzurufen.

Und um Daten zu löschen:

Sie können die Datei, das HTML, das Bild, den Text und die URL des DataFormat verwenden. PS: Sie müssen window.clipboardData.clearData (DataFormat) verwenden.

Und für andere, die window.clipboardData- und swf-Flash-Dateien nicht unterstützen, können Sie auch die Strg-Taste + c auf Ihrer Tastatur für Windows und für Mac mit dem Befehl + c verwenden

Aus dem Addon-Code:

Falls jemand anders nach Chrome-Code gesucht hat, können Sie die hier beschriebene nsIClipboardHelper-Oberfläche verwenden: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard

Verwenden Sie document.execCommand('copy'). Unterstützt in den neuesten Versionen von Chrome, Firefox, Edgeund Safari.

function copyText(text){
  function selectElementText(element) {
    if (document.selection) {
      var range = document.body.createTextRange();
      range.moveToElementText(element);
      range.select();
    } else if (window.getSelection) {
      var range = document.createRange();
      range.selectNode(element);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
    }
  }
  var element = document.createElement('DIV');
  element.textContent = text;
  document.body.appendChild(element);
  selectElementText(element);
  document.execCommand('copy');
  element.remove();
}


var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
  copyText(txt.value);
})

<input id="txt" value="Hello World!" />
<button id="btn">Copy To Clipboard</button>

Die API für die Zwischenablage ersetzt document.execCommand. Safari arbeitet noch an der Unterstützung, daher sollten Sie einen Fallback bereitstellen, bis die Spezifikationen festgelegt sind und Safari die Implementierung abgeschlossen hat.

const permalink = document.querySelector('[rel="bookmark"]');
const output = document.querySelector('output');
permalink.onclick = evt => {
  evt.preventDefault();
  window.navigator.clipboard.writeText(
    permalink.href
  ).then(() => {
    output.textContent = 'Copied';
  }, () => {
    output.textContent = 'Not copied';
  });
};

<a href="/programming/127040/" rel="bookmark">Permalink</a>
<output></output>

Aus Sicherheitsgründen Permissionskann eine Zwischenablage erforderlich sein, um aus der Zwischenablage lesen und schreiben zu können. Wenn das Snippet auf SO nicht funktioniert, versuchen Sie es auf localhosteiner anderen vertrauenswürdigen Domain.

Aufbauend auf der hervorragenden Antwort von @David aus Studio.201 funktioniert dies in Safari, FF und Chrome. Es stellt auch sicher, dass kein Blinken auftreten kann, textareaindem es außerhalb des Bildschirms platziert wird.

// ================================================================================
// ClipboardClass
// ================================================================================
var ClipboardClass = (function() {


   function copyText(text) {
    // Create temp element off-screen to hold text.
        var tempElem = $('<textarea style="position: absolute; top: -8888px; left: -8888px">');
        $("body").append(tempElem);

        tempElem.val(text).select();
        document.execCommand("copy");
        tempElem.remove();
   }


    // ============================================================================
   // Class API
   // ============================================================================
    return {
        copyText: copyText
    };
})();