it-swarm.com.de

Kopieren Sie den Text mit FireFox, Safari und Chrome in die Zwischenablage

In Internet Explorer kann ich das clipboardData-Objekt verwenden, um auf die Zwischenablage zuzugreifen. Wie mache ich das in Firefox, Safari und/oder Chrome?

108
GvS

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

document.execCommand('copy');

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

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

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

Aus Sicherheitsgründen lässt der Browser das Kopieren nur zu, wenn ein Benutzer eine Aktion ausführt (z. B. durch Klicken auf eine Schaltfläche). Eine Möglichkeit, dies zu tun, wäre das Hinzufügen eines onClick-Ereignisses zu einer HTML-Schaltfläche, die eine Methode aufruft, die den Text kopiert. 

Ein vollständiges Beispiel würde aussehen 

<html>
<head>
    <title>copy test</title>
</head>
<body>
    <button onclick="copier()">Copy</button>
    <textarea id="myText">Copy me PLEASE!!!</textarea>

    <script>
        function copier(){
            document.getElementById('myText').select();
            document.execCommand('copy');
        }
    </script>
</body>
</html>
17

Aus Sicherheitsgründen erlaubt Firefox nicht, Text in die Zwischenablage einzufügen. Mit Flash ist jedoch eine Problemumgehung verfügbar.

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 besteht darin, dass Flash aktiviert werden 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

51
ine

Online-Spreadsheets haken Strg + C-, Strg + V-Ereignisse ein, übertragen den Fokus auf ein ausgeblendetes TextArea-Steuerelement und setzen entweder den Inhalt auf den neuen Inhalt der Zwischenablage zum Kopieren oder lesen den Inhalt, nachdem das Ereignis zum Einfügen abgeschlossen wurde.

siehe auch Kann man die Zwischenablage in Firefox, Safari und Chrome mit Javascript lesen?

13
agsamek

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

clipboard.js ist ein Dienstprogramm von Nice, 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

10
a coder

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

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

8
Troels Thomsen

In 2017 können Sie dies tun (dies sagen, da 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 copyStringToClipboard('Hello World') kopieren

Wenn Sie die Zeile setData bemerkt haben und sich gefragt haben, ob Sie verschiedene Datentypen festlegen können, lautet die Antwort ja.

8
Chad Scira

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

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

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

5
Andomar

Ich muss sagen, dass keine dieser Lösungen wirklich funktioniert. Ich habe die Zwischenablage-Lösung aus der akzeptierten Antwort ausprobiert und 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 dabei merkwürdige Fehler festgestellt. Die Funktionsweise von ZeroClipboard besteht darin, dass ein unsichtbares Flash-Objekt über einem Element auf Ihrer Seite platziert wird. Ich habe festgestellt, dass das ZeroClipboard-Flash-Objekt aus dem Gleichgewicht geraten kann, wenn sich mein Element bewegt (z. B. wenn der Benutzer die Fenstergröße ändert und die Elemente richtig ausgerichtet sind). Ich vermute, es sitzt wahrscheinlich immer noch dort, wo es ursprünglich war. Sie haben Code, der das stoppen soll oder das Element neu anklebt, aber es scheint nicht gut zu funktionieren.

Also, in der nächsten Version von BlogTrog, denke ich, werde ich mit all den anderen Code-Hervorhebungselementen, die ich in der Wildnis gesehen habe, folgen und meine Schaltfläche In Zwischenablage kopieren entfernen. :-(

(Ich habe bemerkt, dass die Kopie in die Zwischenablage von dp.syntaxhiglighter jetzt ebenfalls beschädigt ist.)

4
Dave Haynes

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 Link oben zeigt die Anweisungen, wie man es aktiviert (indem man about: config in firefox oder die user.js bearbeitet). 

Glücklicherweise gibt es ein Plugin namens "AllowClipboardHelper", das mit nur wenigen Klicks etwas einfacher macht. Sie müssen jedoch die Besucher Ihrer Website darüber informieren, wie Sie den Zugriff in Firefox aktivieren können.

3
Pablo

Verwenden Sie den modernen document.execCommand ("copy") Und jQuery. Diese Stackoverflow-Antwort anzeigen

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, eine einfache Flash-basierte Schaltfläche. Funktioniert gut, wenn man kein Styling benötigt und sich darüber freut, what auf der Serverseite einfügen zu können.

2
Dr1Ku

Verwenden Sie document.execCommand('copy'). Wird in den neuesten Versionen von Chrome, Firefox, Edge und Safari unterstützt.

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>

1
Trevor

Eine geringfügige Verbesserung der Flash-Lösung besteht in der Erkennung von Flash 10 mit swfobject:

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

wenn es dann als Flash 10 angezeigt wird, laden Sie ein Shockwave-Objekt mithilfe von Javascript. Shockwave kann (in allen Versionen) auch in die Zwischenablage lesen/schreiben, indem der Befehl copyToClipboard () in Jargon verwendet wird.

1
Travis

Von Addon-Code:

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

1
user1115652

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

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

Das ist das, das ich zum Kopieren verwende, und Sie können als extra festlegen, wenn diese Optionen 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 Datei, HTML, Bild, Text und URL des DataFormat verwenden. PS: Sie müssen window.clipboardData.clearData (DataFormat) verwenden.

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

1
User

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 zu verhindern, dass der Flash-Film nicht mehr an der richtigen Stelle ist.

Da diese Methode "Erfordert", muss der Benutzer zum Kopieren auf eine Schaltfläche klicken. Dies ist für den Benutzer eine Annehmlichkeit, und es tritt nichts Schändliches auf.

1
rdivilbiss

Clipboard API soll document.execCommand ersetzen. Safari arbeitet immer noch an der Unterstützung, daher sollten Sie einen Fallback bereitstellen, bis die Spezifikation abgeschlossen ist 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="https://stackoverflow.com/questions/127040/" rel="bookmark">Permalink</a>
<output></output>

Aus Sicherheitsgründen kann die Zwischenablage Permissions zum Lesen und Schreiben aus der Zwischenablage erforderlich sein. Wenn das Snippet unter SO nicht funktioniert, versuchen Sie es mit localhost oder einer anderen vertrauenswürdigen Domäne.

0
Josh Habdas

versuchen Sie, eine globale Speichervariable zu erstellen, in der die Auswahl gespeichert ist. Dann kann die andere Funktion auf die Variable zugreifen und beispielsweise eine Einfügung vornehmen.

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

}
0
David Barrett