J'ai entendu une part de H5 il y a deux jours. Il y a eu une peine à la réunion. J'ai été très touché: ce n'est pas que vous ne pouvez pas, mais que vous avez des exigences trop faibles pour vous-même. Dans une phrase très simple, je crois que beaucoup de choses ne sont pas impossibles pour tout le monde, mais ils ont vraiment des exigences trop faibles pour elles-mêmes. Si vous vous demandez plus d'exigences pour vous-même, vous pouvez faire de plus grands progrès. Depuis son ensemble, de nombreux amis ont également entendu beaucoup de mots qui se motivent à faire des progrès, mais tout le monde ne peut pas continuer à le faire. En fait, cela a beaucoup à voir avec leur personnalité et l'environnement environnant. Je peux seulement dire que vous pouvez trouver plus de méthodes et de conditions pour vous encourager et améliorer constamment vos exigences par vous-même, afin que vous puissiez avoir la possibilité de réaliser plus de réalisations.
Au cours du second semestre de cette année, je prévois de construire un site appelé "Mobile Development Guide" dans le groupe. En train de créer le cadre du site Web, il existe une fonction qui doit copier du texte dans le presse-papiers. Je crois que cette fonction est très couramment utilisée, mais c'est un grand défi pour moi qui n'écrit pas fréquemment de code JS. En regardant en arrière sur un site, j'ai utilisé Window.clipboardData pour réaliser la copie dans la fonction du presse-papiers, et ne prend en charge que les navigateurs IE et FF. À ce moment-là, j'ai trouvé quelques solutions sur Baidu, mais j'ai abandonné si je ne pouvais pas le supporter. Plus tard, j'ai porté un jugement dans le code. Si cet attribut n'est pas pris en charge, je vais directement alerter: cette fonction ne prend pas en charge le navigateur. Veuillez copier le contenu dans la zone de texte manuellement. Maintenant j'y pense, je suis vraiment paresseux. Hehe, quelqu'un a été abattu ~
alert ("Cette fonction ne prend pas en charge ce navigateur, veuillez copier manuellement le contenu dans la zone de texte");Il n'y a en fait aucune explication détaillée sur Internet sur Internet pour réaliser la fonction de copie dans le presse-papiers. De nombreux articles sont les mêmes milliers de fois. Il est assez douloureux pour les chaussures pour enfants qui doivent utiliser la fonction Copie dans le presse-papiers. Aujourd'hui, je partagerai cette partie. En raison de la capacité limitée, veuillez me donner quelques conseils sur les erreurs ~
Je crois que de nombreux étudiants qui ont construit un site à l'aide de WordPress savent qu'il utilise jQuery. Ils ne sont pas inconnus avec JQuery et sont très simples à utiliser. Malheureusement, JQuery lui-même ne réalise pas la fonction de copier dans le presse-papiers, mais peut-être que son API aura cette fonction. Cette fois, le site que j'ai construit utilise WordPress et a passé un peu de temps à rechercher l'API pour copier jQuery dans le presse-papiers. Il y a aussi: jQuery ZeroClipboard, donc je l'ai utilisé pour simplement implémenter la copie dans le presse-papiers dans WordPress. Mais, JQuery Zeroclipboard s'est avéré être un père nommé Zero Presse-papiers.
Le presse-papiers zéro est une bibliothèque JS autonome qui utilise Flash pour la copie, nécessitant deux fichiers: ZeroClipboard.js et ZeroClipboard.swf. Il existe deux versions sur Internet. Le principe de mise en œuvre est copié à l'aide de Flash. Je ne sais pas à qui appartient la création originale, ou les deux frères de la famille, donc je m'en fiche. Tant que nous respectons le droit d'auteur nous-mêmes et exprimons une conscience claire, la version que je vous présenterai aujourd'hui est relativement simple.
Tout d'abord, regardons la figure suivante. L'objet flash généré après l'utilisation du presse-papiers zéro. Il est compatible avec Flash10 et les versions suivantes et est compatible avec tous les navigateurs:
Adresse officielle de Zero Clipboard: http://zeroclipboard.org/, Adresse GitHub: https://github.com/zeroclipboard/zeroclipboard
Utilisez-le pour créer un environnement de serveur. Certains étudiants peuvent ne pas être clairs à ce sujet. Il existe de nombreuses méthodes pour construire un environnement de serveur, comme XP ou IIS qui est livré avec le système Win7. Vous pouvez également utiliser XAMPP, AppServ, APMServ et d'autres packages d'intégration à installer. C'est très simple à construire. Je ne le présenterai pas ici ~
Maintenant, nous utilisons d'abord le presse-papiers indépendant de la bibliothèque JS zéro pour simplement implémenter la copie dans la fonction du presse-papiers, et la démo est la suivante:
<! Doctype html> <html> <éad- head> <itle> Test de presse-papiers zéro </title> <meta charset = "utf-8"> </ head> <body> <! -
illustrer:
1.Data-clipboard-target Entrez l'ID de l'objet à copier
-> <Button id = "d_clip_button" data-clipboard-target = "fe_text"> <b> Copiez dans le presse-papiers </b> </ bouton> <br/> <textarea id = "fe_text" cols = "50" rows = "3"> src = "zeroClipboard.js"> </ script> <script type = "text / javascript"> // définir un nouvel objet de copie var clip = new ZeroClipboard (document.getElementByid ("d_clip_button"), {filmPath: "zeroclipboard.swf"}); args) {alert ("Copier avec succès, la copie du contenu est:" + args.text);}); </cript>Téléchargement de la démonstration (rappel chaleureux: les étudiants qui téléchargent le code, n'oubliez pas d'utiliser l'environnement du serveur lors de la navigation sur la démo, sinon il n'y aura pas d'effet ~)
Les fonctions du presse-papiers zéro ont été introduites dans les commentaires de code ci-dessus. Pour plus de fonctions, veuillez vous rendre sur https://github.com/zeroclipboard/zeroclipboard
Ensuite, introduisez jQuery Zeroclipboard
JQUERY ZeroClipboard est une amélioration basée sur ZeroClipboard, appelée zclip pour faire court. En tant qu'API de jQuery, JQuery Zeroclipboard effectue également des opérations très simples. L'adresse officielle est: http://www.steamdev.com/zclip/
Avant d'utiliser, vous devez vous référer à 2 fichiers JS: jquery.js et jquery.zclip.js
<script type = "text / javascript" src = "js / jquery.js"> </ script> <script type = "text / javascript" src = "js / jquery.zclip.js"> </ script>
Maintenant, nous utilisons jQuery.zclip.js pour simplement implémenter la démo de copie dans le presse-papiers comme suit:
<! Doctype html> <html> <éad- head> <ititle> Test de ZeroClipboard </Title> <Meta Charset = "UTF-8"> <style type = "Text / CSS">. Line {margin-bottom: 20px;} / * copy invite * /. Copy-Tips {Position: Corred; Z-index: 999; inférieur: 50%; Left: 50%; 0 0; -20px -80px; fond-couleur: RGBA (0, 0, 0, 0,2); filtre: PROGID: DxiageTransform.Microsoft.gradient (startColorstr = # 30000000, EndColorstr = # 30000000); Padding: 6px;}. # F4d9a6; background-color: #fffdee; font-size: 14px;} </ style> <script type = "text / javascript" src = "jQuery.js"> </ script> <script type = "text / javascrip Texte </h2> <a href = "# non"> Cliquez pour me copier </a> </div> <div> <h2> Demo2 Cliquez pour copier le texte dans le formulaire </h2> <a href = "# non"> Cliquez sur le texte dans l'ordre de copie </a> </put type = "Text" value = "Entrez ce à copier" /> </DIV> </a> type = "text / javascript"> $ (document) .ready (function () {/ * définir toutes les classes comme des balises de copie, et après avoir cliqué, vous pouvez copier le texte de l'objet cliqué * / $ (". Copy"). zclip ({path: "zeroclipboard.swf", copy: function () {return $ (this) .xtex (); souris * / $ (this) .css ("colore", "orange");}, aftercopy: function () {/ * opération après une copie réussie * / var $ copySuc = $ ("<div class = 'copy-tips'> <div class = 'copy-tips-wrap'> ☺ copy avec succès </div> </div> "); $ (" body "). find (". copy-tips "). disover (). end (). Ajouter ($ copysuc); $ (". Copy-tips "). fadeout (3000);}}); / * définir toutes les classes comme étiquettes de copie. "ZeroClipboard.swf", copy: function () {return $ (this) .parent (). Find (". Input"). Val ();}, aftercopy: function () {/ * opération après copie * / var $ copySuc = $ ("<div class = 'copy-tips'> <div class = 'copy-wrap'> ☺ copy copy avec succès </div> </div> "); $ (" body "). find (". copy-tips "). disover (). end (). append ($ copysuc); $ (". copy-tips "). fadeout (3000);}});}); </ script>Téléchargement de la démonstration (rappel chaleureux: les étudiants qui téléchargent le code, n'oubliez pas d'utiliser l'environnement du serveur lors de la navigation sur la démo, sinon il n'y aura pas d'effet ~)
Le code ci-dessus combine les fonctions des nœuds de fonctionnement de jQuery et joue bien le rôle de jQuery.zclip.js, comme avant et après la copie, insérant dynamiquement les nœuds. On peut également voir que la puissance de jQuery.zclip.js est très simple à utiliser. Si vous avez besoin d'en savoir plus sur les fonctions de jquery.zclip.js, veuillez vous rendre sur http://www.steamdev.com/zclip/
À partir des bibliothèques JS indépendantes ci-dessus, ZeroClipboard.js et jQuery.zclip.js utilisent les deux Flash pour implémenter la fonction de copie dans le presse-papiers. On peut voir que l'utilisation de ZeroClipboard.js apporte relativement peu de fonctions, mais c'est une bibliothèque indépendante avec des fichiers relativement petits. Les fonctions après avoir utilisé jQuery.zclip.js sont relativement riches. Cependant, pour les sites qui n'utilisent pas le framework jQuery, l'utilisation de jQuery.zclip.js est un gaspillage de haut débit. Quelle méthode de copie à utiliser dépend du positionnement spécifique du produit ~
Ce qui précède est l'implémentation JS de la copie de contenu dans la fonction du presse-papiers que l'éditeur vous a introduit est compatible avec tous les navigateurs (recommandés). J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!