Teilen der grundlegenden Verwendung von clipboard.js

小云云

Freigeben： 2018-03-07 16:13:00

Original

6389 Leute haben es durchsucht

clipboard.js ist ein Plug-in, das Text ohne Flash in die Zwischenablage kopiert. Dieser Artikel führt Sie hauptsächlich in die grundlegende Verwendung von clipboard.js ein. Ich hoffe, er kann Ihnen helfen.

1 Einführung in das Plug-in

<script src="js/clipboard.min.js"></script>

Nach dem Login kopieren

2 Grundlegende Verwendung

Zuerst müssen Sie es instanziieren, indem Sie einen DOM-Selektor, ein HTML-Element oder eine Liste von HTML-Elementen übergeben.

new Clipboard(&#39;.btn&#39;);

Nach dem Login kopieren

1 Verwenden Sie ein Element als Auslöser, um den Text eines anderen Elements zu kopieren. Dem Attribut data-clipboard-target muss der Attributselektor

<🎜 folgen >

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
</button>

Nach dem Login kopieren

Es gibt auch ein weiteres Attribut data-clipboard-action, um anzugeben, ob ein Kopier- oder Ausschneidevorgang erforderlich ist. Der Standardwert ist Kopieren. Der Ausschneidevorgang funktioniert nur bei -Elementen.

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

Nach dem Login kopieren

2 Kopieren Sie den Text aus dem Attribut. Sie benötigen kein weiteres Element als Auslöser. Sie können das Attribut data-clipboard-text verwenden und den zu kopierenden Text dahinter einfügen.

<button class="btn" data-clipboard-text="Just because you can doesn&#39;t mean you should — clipboard.js">
    Copy to clipboard
</button>

Nach dem Login kopieren

3 Weitere Anweisungen

1 Überprüfen Sie, ob clipboard.js Clipboard.isSupported() unterstützt, indem Sie es ausführen. Wenn es true zurückgibt, kann es verwendet werden.

2 Zeigen Sie Benutzerfeedback an oder erfassen Sie die Auswahl nach dem Kopier-/Ausschneidevorgang. Operation, Text, Triggerelement

var clipboard = new Clipboard(&#39;.btn&#39;);
    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        e.clearSelection();
    });
    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });

Nach dem Login kopieren

3 Dieses Plug-in nutzt die Ereignisdelegation zum Auslösen und reduziert so die Vorgänge im DOM erheblich.

4 Erweiterte Verwendung

Wenn Sie Ihr HTML nicht ändern möchten, können Sie eine sehr praktische Befehls-API verwenden. Sie müssen lediglich eine Funktion deklarieren, die gewünschte Operation schreiben und einen Wert zurückgeben. Unten finden Sie ein Beispiel für die Rückgabe unterschiedlicher Werte für Trigger mit unterschiedlichen IDs. Spezifische Verwendungsmethoden finden Sie unter https://clipboardjs.com

<body>
    <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
    <!-- Trigger -->
    <button id=&#39;foo_1&#39; class="btn" data-clipboard-target="#foo">
    </button>
</body>
<script>
    new Clipboard(&#39;.btn&#39;, {
        text: function(trigger) {
            if(trigger.getAttribute(&#39;id&#39;)==&#39;foo_1&#39;){
                return 1;
            }else{
                return 2;
            }
        }
    });
</script>

Nach dem Login kopieren

Verwandte Empfehlungen:

clipboard.js verwendet HTML-Seiten, um Informationen in die Zwischenablage zu kopieren

ZeroClipboard.js verwendet einen Flash, um mehrere Textfelder zu kopieren

Clipboard.js JavaScript-Bibliothek zum Kopieren und Einfügen ohne Flash_Javascript-Tipps

Das obige ist der detaillierte Inhalt vonTeilen der grundlegenden Verwendung von clipboard.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!