Explication détaillée des étapes pour implémenter la fonction de copie dans clipboard.js

Cette fois, je vais vous apporter une explication détaillée des étapes pour implémenter la fonction de copie dans clipboard.js. Quelles sont les précautions pour implémenter la fonction de copie dans clipboard.js. Voici un cas pratique. , jetons un coup d'oeil.

J'ai récemment eu un besoin au travail, qui est d'utiliser un bouton pour copier le contenu correspondant. J'ai trouvé de nombreuses solutions sur Internet et j'ai finalement choisi le plug-in clipboard.js pour l'implémentation. Parce qu'il ne repose pas sur Flash ou d'autres frameworks, qu'il est de petite taille, facile à utiliser et offre une bonne compatibilité. Vous trouverez ci-dessous une brève introduction à son utilisation.

En présentant les plug-ins, vous pouvez les télécharger ou utiliser un CDN tiers.

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

Pour HTML, nous avons deux utilisations.

Le premier type

//html部分
<input type="text" id="copyValue" />
<button type="button" data-clipboard-target=&#39;#copyValue&#39;>复制</button>
//js部分
var clipboard = new Clipboard('button');
clipboard.on('success',function(e){
 e.clearSelection();
 alert('复制成功');
 });
clipboard.on('error',function(e){
 e.clearSelection();
 alert('复制失败');
 });

Remarque : Si nous utilisons un bouton pour copier le contenu d'un autre élément, nous pouvons utiliser cette méthode. À ce stade, le bouton est appelé élément déclencheur et l’élément copié est appelé élément cible. À l'heure actuelle, la valeur de data-clipboard-target est le sélecteur de l'élément cible, et l'attribut de data-clipboard-target est défini sur l'élément déclencheur. nouveau Clipboard() est un objet instancié, et les paramètres peuvent être un élément HTML, un sélecteur d'élément. Il existe deux événements, le succès et l'erreur, que nous pouvons surveiller et mettre en œuvre notre propre logique. Parce qu'une fois la copie terminée, l'élément cible sera dans l'état sélectionné, nous avons donc besoin de e.clearSelection() pour annuler l'état sélectionné de l'élément cible.
Avantages : Le contenu copié peut être dynamique Lorsque la valeur de l'élément cible change, la valeur copiée change également.

Scénarios applicables : le contenu de la copie est variable et non fixe.

Deuxième type

//html部分
<button type="button" data-clipboard-text=&#39;复制内容&#39;>复制</button>
//js部分
new Clipboard('button');

Remarque : La valeur de data-clipboard-text correspond au contenu que vous souhaitez copier. Il n’y a pas d’éléments cibles, seulement des éléments déclencheurs.

Inconvénients : Le contenu copié est statique, inchangé et défini à l'avance.

Scénarios applicables : le contenu copié est corrigé

Pour les défauts ci-dessus, nous pouvons optimiser comme suit afin que le contenu copié soit également dynamique.

//html部分
 <input type="text" id="copyValue" />
 <button type="button" id="copy">复制</button>
//js
$('#copy').on('click', function () {
 var value = $('#copyValue').val();
 $('#copy').attr('data-clipboard-text', value);
 var clipboard = new Clipboard('#copy');
 clipboard.on('success', function (e) {
  alert('复制成功');
 });
 clipboard.on('error', function (e) {
  alert('复制失败');
 });
})

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Les composants parent-enfant de Vue2.0 transfèrent des fonctions entre eux (avec du code)

Le utilisation de JS orienté objet Explication détaillée

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!