Maison > Article > interface Web > Le plug-in JQuery zClip implémente la copie du contenu de la page dans clipboard_jquery
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>
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>
Puis ajoutez le script
<script> $('#copyBtn').zclip({ path: "ZeroClipboard.swf", copy: function(){ return $('#link').val(); } }); </script>
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.