Table des matières
1 Présentation du plug-in
2 Utilisation de base
Maison interface Web js tutoriel Partager l'utilisation de base de clipboard.js

Partager l'utilisation de base de clipboard.js

Mar 07, 2018 pm 04:13 PM
javascript 使用方法

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!

Déclaration de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Où trouver la courte de la grue à atomide atomique
1 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser l'outil de réparation DirectX ? Utilisation détaillée de l'outil de réparation DirectX Comment utiliser l'outil de réparation DirectX ? Utilisation détaillée de l'outil de réparation DirectX Mar 15, 2024 am 08:31 AM

L'outil de réparation DirectX est un outil système professionnel. Sa fonction principale est de détecter l'état DirectX du système actuel. Si une anomalie est détectée, elle peut être réparée directement. De nombreux utilisateurs ne savent peut-être pas comment utiliser l'outil de réparation DirectX. Jetons un coup d'œil au didacticiel détaillé ci-dessous. 1. Utilisez le logiciel de l'outil de réparation pour effectuer la détection des réparations. 2. S'il y a un problème anormal dans le composant C++ une fois la réparation terminée, cliquez sur le bouton Annuler, puis sur la barre de menu Outils. 3. Cliquez sur le bouton Options, sélectionnez l'extension, puis cliquez sur le bouton Démarrer l'extension. 4. Une fois l'extension terminée, détectez-la à nouveau et réparez-la. 5. Si le problème n'est toujours pas résolu une fois l'opération de l'outil de réparation terminée, vous pouvez essayer de désinstaller et de réinstaller le programme qui a signalé l'erreur.

Introduction au code d'état HTTP 525 : explorez sa définition et son application Introduction au code d'état HTTP 525 : explorez sa définition et son application Feb 18, 2024 pm 10:12 PM

Introduction au code d'état HTTP 525 : Comprendre sa définition et son utilisation Le code d'état HTTP (HypertextTransferProtocol) 525 signifie que le serveur a une erreur lors du processus de prise de contact SSL, entraînant l'incapacité d'établir une connexion sécurisée. Le serveur renvoie ce code d'état lorsqu'une erreur se produit lors de la négociation TLS (Transport Layer Security). Ce code d'état appartient à la catégorie des erreurs de serveur et indique généralement un problème de configuration ou d'installation du serveur. Lorsque le client tente de se connecter au serveur via HTTPS, le serveur n'a aucun

Comment utiliser Baidu Netdisk-Comment utiliser Baidu Netdisk Comment utiliser Baidu Netdisk-Comment utiliser Baidu Netdisk Mar 04, 2024 pm 09:28 PM

De nombreux amis ne savent toujours pas comment utiliser Baidu Netdisk, c'est pourquoi l'éditeur vous expliquera ci-dessous comment utiliser Baidu Netdisk. Si vous en avez besoin, dépêchez-vous et jetez un œil. Étape 1 : Connectez-vous directement après avoir installé Baidu Netdisk (comme indiqué sur l'image) ; Étape 2 : Sélectionnez ensuite « Mon partage » et « Liste de transfert » selon les invites de la page (comme indiqué sur l'image) ; Partage entre amis", vous pouvez partager des images et des fichiers directement avec des amis (comme indiqué sur l'image) ; Étape 4 : Sélectionnez ensuite "Partager", puis sélectionnez les fichiers de l'ordinateur ou les fichiers du disque réseau (comme indiqué sur l'image) ; Cinquième étape 1 : Ensuite, vous pouvez trouver des amis (comme indiqué sur l'image) ; Étape 6 : Vous pouvez également trouver les fonctions dont vous avez besoin dans la « Boîte au trésor des fonctions » (comme indiqué sur l'image). Ce qui précède est l’opinion de l’éditeur

Apprenez à copier et coller rapidement Apprenez à copier et coller rapidement Feb 18, 2024 pm 03:25 PM

Comment utiliser les touches de raccourci copier-coller Le copier-coller est une opération que l'on rencontre souvent lors de l'utilisation quotidienne d'un ordinateur. Afin d'améliorer l'efficacité du travail, il est très important de maîtriser les touches de raccourci copier-coller. Cet article présentera certaines touches de raccourci copier-coller couramment utilisées pour aider les lecteurs à effectuer plus facilement les opérations de copier-coller. Touche de raccourci de copie : Ctrl+CCtrl+C est la touche de raccourci pour la copie. En maintenant la touche Ctrl enfoncée puis en appuyant sur la touche C, vous pouvez copier le texte, les fichiers, les images, etc. sélectionnés dans le presse-papiers. Pour utiliser cette touche de raccourci,

Qu'est-ce que l'outil d'activation KMS ? Comment utiliser l'outil d'activation KMS ? Comment utiliser l'outil d'activation KMS ? Qu'est-ce que l'outil d'activation KMS ? Comment utiliser l'outil d'activation KMS ? Comment utiliser l'outil d'activation KMS ? Mar 18, 2024 am 11:07 AM

L'outil d'activation KMS est un outil logiciel utilisé pour activer les produits Microsoft Windows et Office. KMS est l'abréviation de KeyManagementService, qui est un service de gestion de clés. L'outil d'activation KMS simule les fonctions du serveur KMS afin que l'ordinateur puisse se connecter au serveur KMS virtuel pour activer les produits Windows et Office. L'outil d'activation KMS est de petite taille et puissant en fonction. Il peut être activé en permanence en un seul clic. Il peut activer n'importe quelle version du système Windows et n'importe quelle version du logiciel Office sans être connecté à Internet. et outil d'activation Windows fréquemment mis à jour. Aujourd'hui, je vais le présenter. Permettez-moi de vous présenter le travail d'activation de kms.

Comment fusionner des cellules à l'aide des touches de raccourci Comment fusionner des cellules à l'aide des touches de raccourci Feb 26, 2024 am 10:27 AM

Comment utiliser les touches de raccourci pour fusionner des cellules Dans le travail quotidien, nous devons souvent éditer et formater des tableaux. La fusion de cellules est une opération courante qui permet de fusionner plusieurs cellules adjacentes en une seule cellule pour améliorer la beauté du tableau et l'effet d'affichage des informations. Dans les tableurs grand public tels que Microsoft Excel et Google Sheets, l'opération de fusion de cellules est très simple et peut être réalisée via des touches de raccourci. Ce qui suit présentera l'utilisation des touches de raccourci pour fusionner des cellules dans ces deux logiciels. exister

Qu'est-ce que PyCharm ? Introduction aux fonctions et explication détaillée de l'utilisation Qu'est-ce que PyCharm ? Introduction aux fonctions et explication détaillée de l'utilisation Feb 20, 2024 am 09:21 AM

PyCharm est un environnement de développement intégré (IDE) Python professionnel développé par JetBrains. Il fournit aux développeurs Python des fonctions et des outils puissants, rendant l'écriture de code Python plus efficace et plus pratique. PyCharm prend en charge plusieurs systèmes d'exploitation, notamment Windows, macOS et Linux, ainsi que plusieurs versions de Python et fournit une multitude de plug-ins et de fonctions d'extension pour permettre aux développeurs de personnaliser l'environnement IDE en fonction de leurs propres besoins. P.

Comment utiliser Potplayer-Comment utiliser Potplayer Comment utiliser Potplayer-Comment utiliser Potplayer Mar 04, 2024 pm 06:10 PM

Potplayer est un lecteur multimédia très puissant, mais de nombreux amis ne savent toujours pas comment utiliser potplayer. Aujourd'hui, je vais vous présenter en détail comment utiliser potplayer, dans l'espoir d'aider tout le monde. 1. Touches de raccourci PotPlayer. Les touches de raccourci communes par défaut pour le lecteur PotPlayer sont les suivantes : (1) Lecture/pause : espace (2) Volume : molette de la souris, touches fléchées haut et bas (3) avant/arrière : flèches gauche et droite. touches (4) signet : P- Ajouter des signets, H-View signets (5) Plein écran/restauration : Entrée (6) Vitesse : C-accélération, 7) Image précédente/suivante : D/

See all articles