Maison > interface Web > js tutoriel > Le plug-in JQuery zClip implémente la copie du contenu de la page dans clipboard_jquery

Le plug-in JQuery zClip implémente la copie du contenu de la page dans clipboard_jquery

WBOY
Libérer: 2016-05-16 15:34:06
original
1384 Les gens l'ont consulté

Je crois que tout le monde rencontre souvent cette fonction en surfant sur Internet. Je n'ai pas prêté beaucoup d'attention à la façon de la mettre en œuvre auparavant, jusqu'à ce qu'elle soit nécessaire dans le projet.

Effet final :

Après de nombreuses recherches sur Internet, il n'est pas impossible d'utiliser simplement la méthode js, mais en raison des différents mécanismes de sécurité de chaque navigateur, ce n'est pas multi-navigateur. J'ai vérifié plusieurs sites Web couramment utilisés, et ils utilisent tous du flash transparent pour couvrir le bouton "Copier dans le presse-papiers". Ainsi, lorsque vous cliquez sur "Copier dans le presse-papiers", ce sur quoi vous cliquez est en fait Flash, puis vous copiez le contenu que vous devez copier. . Il est transmis au flash, puis le contenu entrant est copié dans le presse-papiers via la fonction de copie du flash.
Charger la bibliothèque JQuery et le plug-in zclip

<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> 
<script src="js/jquery.zclip.min.js"></script> 
Copier après la connexion

Ce qui suit est une petite démo, qui copie principalement le lien dans la zone de texte vers le presse-papiers.
HTML

<input type="text" value="www.jb51.net" id="link"> 
<span id="copyBtn">复制链接</span> 
Copier après la connexion

Puis ajoutez le script

<script> 
    $('#copyBtn').zclip({ 
      path: "ZeroClipboard.swf", 
      copy: function(){ 
        return $('#link').val(); 
       } 
    }); 
</script> 
Copier après la connexion

Ensuite, vous pouvez ouvrir directement la page Web pour tester. Ce n'est qu'une simple petite application, j'espère que tout le monde pourra la maîtriser rapidement.

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal