clipboard.js ne nécessite pas Flash et ne dépend d'aucune bibliothèque JS pour réaliser des compétences en matière de copie de texte et de découpage_javascript

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 3f1c4e4b6b16bbbd69b2ee476dc4f83a avant 36cc49f0c466276486e50c850b7e4956, enregistrez-le, ouvrez-le pour le parcourir et cliquez sur le bouton pour copier.

new Clipboard('.btn'); 

Bien sûr, nous pouvons le traiter davantage. Par exemple, lorsque la copie est terminée, il sera plus convivial d'afficher le message de copie réussie. Exécutez simplement le code suivant :
.

var clipboard = new Clipboard('.btn'); 
 
clipboard.on('success', function(e) { 
 var msg = e.trigger.getAttribute('aria-label'); 
 alert(msg); 
 
 e.clearSelection(); 
}); 

Ce qui précède est le processus de copie et de découpe de texte qui ne nécessite pas de flash et ne repose sur aucune autre bibliothèque js. J'espère que cela sera utile à l'apprentissage de chacun.