So verwenden clipboard.js

Question

Wie Sie aus dieser Frage mutmaßen kann, ich bin nicht sehr gut mit JavaScript und versuche clipboard.js zu bekommen (https://clipboardjs.com/) arbeiten, aber nicht kann. Ich folgte Anweisungen von clipboard.min.js in die Skriptordner kopiert und referenziert sie dann in meiner HTML-Datei. Dann kopierte ich die Taste (und modifiziert es ein bisschen wie folgt aus:

<button class="btn" id="test" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"> 
    Copy to clipboard 
</button> 

In ihrer Setup-Anweisungen, sie sagen:

„Nun, Sie müssen es instanziiert durch einen DOM-Selektor vorbei, HTML-Element ., oder eine Liste von HTML-Elementen“

new Clipboard('.btn'); 

so dann machte ich einen Ereignis-Listener wie folgt aus:

$('#test').click(function() { 
      var clipboard = new Clipboard('#test'); 
     }); 

Aber ich weiß nicht, was ich soll mit der Zwischenablage Variable tun, wenn es erstellt wird. Oder habe ich verpasst den Punkt auf, was ich angeblich völlig zu tun?

Answer 1

Ich denke, die Art und Weise haben Sie es zu verwenden ist einfach instanziieren, nachdem das DOM geladen ist:

$(function() { 
    new Clipboard('#test'); 
}); 

Dies wird die Schaltfläche konvertieren (mit id="test") in eine Zwischenablage kopieren Schaltfläche. Und es wird durch Drücken den Wert data-clipboard-text in die Zwischenablage gestellt.

Sie brauchen nicht einmal diese Instanz zu speichern, es sei denn, Sie mit der Taste später im Code zu interagieren möchten.