Nous plaçons un bouton de copie sur la page Web, qui est principalement utilisé pour permettre aux utilisateurs de copier des textes complexes tels que des liens. Dans le passé, nous nous appuyions sur Flash via JS, ou même sur l'immense bibliothèque js de jQuery pour. copier le texte dans le presse-papiers. Ce que je veux vous présenter aujourd'hui est un plug-in très moderne qui ne nécessite pas de flash et ne s'appuie sur aucune autre bibliothèque js. Il s'appelle clipboard.js.
Opération de rendu :
HTML
Chargez d’abord le fichier clipboard.js local.
<script src="clipboard.min.js"></script>
Ajoutez ensuite le contenu du champ de texte à copier ou couper ainsi que le bouton dans le corps.
<input id="foo" value="http://www.jb51.net/article/73145.htm"> <button class="btn" data-clipboard-target="#foo" aria-label="复制成功！">复制</button>
Ici, nous utilisons l'attribut data de HTML5 pour localiser la cible de l'objet de copie. Il pointe vers le champ de texte #foo, indiquant que le contenu de la valeur dans #foo est copié. L'attribut aria-label définit la copie une fois réussie. copie. Informations, utilisées pour demander des informations sur le résultat de la copie.
Il existe également un attribut data-clipboard-action, qui définit si l'opération en cours est copier ou couper. La valeur par défaut est copy. Lorsque data-clipboard-action="cut", cliquer sur le bouton coupera le texte, tout comme le MOT. opération. . Bien entendu, l’opération de coupe ne fonctionne que sur le texte et la zone de texte.
Nous n'avons pas non plus besoin du contenu d'éléments tels que input et textarea comme objets de copie. Nous pouvons définir le contenu à copier sur le bouton via l'attribut ata-clipboard-text Cliquez sur le bouton pour copier dans le contenu correspondant à ata-. texte du presse-papiers.
<button class="btn" data-clipboard-text="这里是要复制的内容" aria-label="复制成功！">复制</button>
Javascript
Ajoutez le code suivant au
Quel est le format du caj
Introduction aux commandes pour créer de nouveaux fichiers sous Linux
Comment acheter du Dogecoin
Qu'est-ce que l'espace libre
Quel logiciel est Xiaohongshu ?
Comment définir le retour à la ligne automatique dans Word
Comment ouvrir le format jsp
Quels sont les outils d'attaque DDoS ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
