Klicken Sie auf die Schaltfläche, um in die Zwischenablage zu kopieren.

Question

Wie kann ich den Text innerhalb einer div in die Zwischenablage kopieren? Ich habe eine div und muss einen Link hinzufügen, der den Text in die Zwischenablage kopiert. Gibt es eine Lösung dafür?

Lorem Ipsum ist einfach nur Blindtext aus der Druck- und Setzindustrie. Lorem Ipsum ist seit den 1500er Jahren der Standard-Blindtext der Branche

Text kopieren

Nachdem ich auf Text kopieren geklickt habe, muss ich dann Strg + V drücken, um ihn einzufügen.

Answer 1

Der Text, der kopiert werden soll, befindet sich im Texteingabefeld, z. B .: und beim Klicken auf die Schaltfläche sollte der obige Text in die Zwischenablage kopiert werden. Die Schaltfläche sieht folgendermaßen aus: Kopieren Dein Skript sollte so aussehen:

$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
  moviePath: "ZeroClipboard.swf"
}); 
});

Für CDN-Dateien

• (zeroclipboard.swf):
• (zeroclipboard.js):

Hinweis: Die Dateien ZeroClipboard.swf und ZeroClipboard.js müssen sich im gleichen Ordner wie Ihre Datei befinden, die diese Funktionalität verwendet, ODER Sie müssen sie so einbinden wie wir auf unseren Seiten einbinden.

Answer 2

Sie können einen einzelnen Text abgesehen vom Text eines HTML-Elements kopieren.

        var copyToClipboard = function (text) {
            var $txt = $('');

            $txt.val(text)
                .css({ width: "1px", height: "1px" })
                .appendTo('body');

            $txt.select();

            if (document.execCommand('copy')) {
                $txt.remove();
            }
        };
</code></pre></x-turndown>

Answer 3

Die Bibliothek Clipboard-polyfill ist ein Polyfill für die moderne, auf Promise basierende asynchrone Zwischenablage-API.

Installation in der Befehlszeile:

npm install clipboard-polyfill 

Importieren als Zwischenablage in der JS-Datei

window.clipboard = require('clipboard-polyfill');

Beispiel

Ich benutze es zusammen mit require("babel-polyfill"); und habe es auf Chrome 67 getestet. Alles gut für die Produktion.

Answer 4

Sie können diese Bibliothek einfach verwenden, um das Kopierenziel leicht zu erreichen!

https://clipboardjs.com/

Das Kopieren von Text in die Zwischenablage sollte nicht schwierig sein. Es sollte nicht erforderlich sein, Dutzende von Schritten zu konfigurieren oder Hunderte von KB zu laden. Aber vor allem sollte es nicht von Flash oder einem aufgeblähten Framework abhängen.

Genau aus diesem Grund gibt es clipboard.js.

oder

https://github.com/zeroclipboard/zeroclipboard

http://zeroclipboard.org/

Die ZeroClipboard-Bibliothek bietet eine einfache Möglichkeit, Text in die Zwischenablage zu kopieren, indem ein unsichtbarer Adobe Flash-Film und eine JavaScript-Schnittstelle verwendet werden.

Answer 5

Reiner JS, ohne Inline-OnClick, für gepaarte Klassen "Inhalt - Kopieren-Taste". Wäre bequemer, wenn Sie viele Elemente haben)

(function(){

/* Erstellen des Textbereichs nur einmal, aber nicht jedes Mal */
let area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";

let content = document.querySelectorAll('.js-content');
let copy    = document.querySelectorAll('.js-copy');

for( let i = 0; i < copy.length; i++ ){
  copy[i].addEventListener('click', function(){
    area.style.display = "block";
    /* Da die Klassen gepaart sind, können wir den [i]-Index der angeklickten Schaltfläche verwenden,
    um den erforderlichen Textblock zu erhalten */
    area.value = content[i].innerText;
    area.select();
    document.execCommand('copy');   
    area.style.display = "none";

    /* dekorativer Teil */
    this.innerHTML = 'Kopiert';
    /* Pfeilfunktion ändert 'this' nicht, hier ist es immer noch die angeklickte Schaltfläche */
    setTimeout( () => this.innerHTML = "Kopieren", 2000 );
  });
}

})();

hr { margin: 15px 0; border: none; }

1111
Kopieren

2222
Kopieren

3333
Kopieren

Unterstützung für ältere Browser:

(function(){

var area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";

var content = document.querySelectorAll('.js-content');
var copy    = document.querySelectorAll('.js-copy');

for( var i = 0; i < copy.length; i++ ){
  copyOnClick(i);
}

function copyOnClick(i){
  copy[i].addEventListener('click', function(){
    area.style.display = "block";
    area.value = content[i].innerText;
    area.select();
    document.execCommand('copy');   
    area.style.display = "none";

    var t = this;
    t.innerHTML = 'Kopiert';
    setTimeout( function(){
      t.innerHTML = "Kopieren"
    }, 2000 );
  });
}

})();

hr { margin: 15px 0; border: none; }

1111
Kopieren

2222
Kopieren

3333
Kopieren