Partager l'utilisation de base de clipboard.js

小云云

Libérer： 2018-03-07 16:13:00

original

6382 Les gens l'ont consulté

clipboard.js est un plug-in qui copie le texte dans le presse-papiers sans flash. Cet article vous présente principalement l'utilisation de base de clipboard.js. J'espère qu'il pourra vous aider.

1 Présentation du plug-in

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

Copier après la connexion

2 Utilisation de base

Vous devez d'abord l'instancier en passant un sélecteur DOM, un élément HTML ou une liste d'éléments HTML.

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

Copier après la connexion

1 Utilisez un élément comme déclencheur pour copier le texte d'un autre élément. L'attribut data-clipboard-target doit être suivi du sélecteur d'attribut

<🎜. >

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

Copier après la connexion

Il existe également un autre attribut data-clipboard-action pour spécifier si une opération de copie ou de coupe est requise. La valeur par défaut est la copie. L'opération de coupe ne fonctionne que sur les éléments

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

Copier après la connexion

2 Copiez le texte de l'attribut. Vous n'avez pas besoin d'un autre élément comme déclencheur. Vous pouvez utiliser l'attribut data-clipboard-text et mettre le texte qui doit être copié après.

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

Copier après la connexion

3 Autres instructions

1 Vérifiez si clipboard.js prend en charge Clipboard.isSupported() en l'exécutant. S'il renvoie vrai, il peut être utilisé.

2 Affichez des commentaires d'utilisateurs ou capturez la sélection après l'opération de copie/coupe. Opération, texte, élément déclencheur

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

Copier après la connexion

3 Ce plug-in utilise la délégation d'événement pour déclencher, il réduit donc considérablement les opérations sur le DOM.

4 Utilisation avancée

Si vous ne souhaitez pas modifier votre HTML, vous pouvez utiliser une API de commande très pratique. Tout ce que vous avez à faire est de déclarer une fonction, d’écrire l’opération souhaitée et de renvoyer une valeur. Vous trouverez ci-dessous un exemple de renvoi de différentes valeurs pour des déclencheurs avec des ID différents. Pour des méthodes d'utilisation spécifiques, veuillez consulter 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>

Copier après la connexion

Recommandations associées :

clipboard.js utilise des pages HTML pour copier des informations dans le presse-papiers

ZeroClipboard.js utilise un flash pour copier plusieurs zones de texte

Bibliothèque de copier-coller JavaScript Clipboard.js sans astuces Flash_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!