Maison >interface Web >js tutoriel >Partager l'utilisation de base de clipboard.js

Partager l'utilisation de base de clipboard.js

小云云original: 2018-03-07 16:13:006390parcourir

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>

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

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>

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 d5fd7aea971a85678ba271703566ebfd

<!-- 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 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>

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

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée du filtre de formatage temporel angulaireJSArticle suivant：Explication détaillée du filtre de formatage temporel angulaireJS

Articles Liés

Voir plus