suchen

Heim >Web-Frontend >js-Tutorial >Teilen der grundlegenden Verwendung von clipboard.js

Teilen der grundlegenden Verwendung von clipboard.js

小云云
小云云Original
2018-03-07 16:13:006383Durchsuche

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>

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


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

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
</button>
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 d5fd7aea971a85678ba271703566ebfd-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>
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>
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);
    });
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>
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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung des AngularJS-ZeitformatierungsfiltersNächster Artikel：Detaillierte Erläuterung des AngularJS-Zeitformatierungsfilters

In Verbindung stehende Artikel

Mehr sehen