Code d'implémentation de la fonction presse-papiers HTML5

Récemment, Vue a été utilisé pour développer le H5 intégré de Line (une plate-forme japonaise et coréenne similaire au WeChat chinois). L'une des exigences est de coller le lien actuel, puis de l'envoyer au PC et de l'ouvrir sur l'ordinateur. Toute la collection retrouve les situations suivantes :

Cette situation s'applique à la copie de texte dans des zones de non-saisie dans le presse-papiers

 <h1 id=content>Contenu copié</h1> <button id=button>Cliquez pour copier</button> <script> (function(){ button.addEventListener('click', function(){ var copyDom = document . querySelector('#content'); //Créer une plage sélectionnée var range = document.createRange(); //Supprimer le contenu du presse-papiers window.getSelection().removeAllRanges(); //Ajouter un nouveau contenu au presse-papiers window.getSelection().addRange(range); //Copier var réussi = document.execCommand( 'copy') ; try{ var msg = success ? success : failed; alert('La commande de copie était : ' + msg); copie !'); } }) })() </script>

Utilisé pour copier du texte en entrée, zone de texte

 <input type=text id=input value=17373383> <br> <button type=button id=button>Copiez le contenu dans la zone de saisie</button> <script> (function(){ button.addEventListener('click' , function (){ input.select(); document.execCommand('copie'); alert('copie réussie' }) })() </script>

Cette méthode peut également être étendue et a le même objectif que la méthode 1. Créez dynamiquement une zone de saisie, définissez son contenu sur le contenu que vous souhaitez copier, et enfin supprimez-le ou masquez-le.

3.js copie le contenu dans le plug-in du presse-papiers (clipboard.js)

site officiel de clipboard.js

Adresse CDN clipboard.js

Citation:

NPM npm install --save clipboard

CDN <script src=https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js></script>

 <!--La valeur par défaut est d'intercepter la valeur d'attribut de data-clipboard-text dans .btn--> <!-- <button class=btn data-clipboard-text=3>Copier</button> --> < !- -Intercepter la valeur dans la zone de saisie d'entrée--> <input id=foo value=https://github.com/zenorocha/clipboard.js.git> <!-- Trigger --> <button class=btn data-clipboard-target=#foo> <img src=assets/clippy.svg </button> <script src=https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js></ script> <script> var clipboard = new ClipboardJS('.btn'); clipboard.on('succès', function (e) { console.log(e); }); clipboard.on('erreur', fonction (e) { console.log(e); });

Il contient de nombreuses utilisations avancées. Vous pouvez accéder à la logique du site Web officiel pour plus de détails.

4. Le plug-in presse-papiers vue-clipboard2 fourni par le framework Vue

 importer Vue depuis 'vue' importer VueClipboard depuis 'vue-clipboard2' VueClipboard.config.autoSetContainer = true // ajouter cette ligne Vue.use(VueClipboard)

Échantillon1

 <div id=app></div> <template id=t> <div class=container> <input type=text v-model=message> <button type=button v-clipboard:copy=message v-clipboard:success =onCopy v-clipboard:error=onError>Copier !</button> </div> </template> <script> new Vue({ el: '#app', template: '#t', data : function () { return { message : 'Copier ces textes' } }, méthodes : { onCopy : function (e) { alert('Vous venez de copier : ' + e.text) }, onError : function (e) { alert('Échec de la copie des textes') } } }) </script>

Échantillon2

 <div id=app></div> <template id=t> <div class=container> <input type=text v-model=message> <button type=button @click=doCopy>Copier !</button> < /div> </template> <script> new Vue({ el : '#app', template : '#t', data : function () { return { message : 'Copier ces textes' } }, méthodes : { doCopy : function () { this.$copyText(this.message).then(function (e) { alert('Copied') console.log(e) }, function (e) { alert('Impossible de copier') console.log(e) }) } } }) </script>

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.