Implémentation de la fonction presse-papiers HTML5

Cet article présente principalement le code d'implémentation de la fonction presse-papiers Html5. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Vue a récemment été utilisé pour développer le H5 embarqué de Line (une plateforme japonaise et coréenne similaire au WeChat chinois). L'une des exigences est de coller le lien actuel, puis de l'envoyer sur le PC et de l'ouvrir. l'ordinateur. Après toute la collecte, j'ai trouvé plusieurs situations :

1. Méthode Native js sans zone de saisie

Cette situation est adaptée pour copier des zones sans saisie. dans le presse-papiers

     <h1 id="content">被复制的内容</h1>
     <button id="button">点击复制</button>

     <script>
        (function(){
            button.addEventListener(&#39;click&#39;, function(){
                var copyDom = document.querySelector(&#39;#content&#39;);
                //创建选中范围
                var range = document.createRange();
                range.selectNode(copyDom);
                //移除剪切板中内容
                window.getSelection().removeAllRanges();
                //添加新的内容到剪切板
                window.getSelection().addRange(range);
                //复制
                var successful = document.execCommand(&#39;copy&#39;);

                try{
                    var msg = successful ? "successful" : "failed";
                    alert(&#39;Copy command was : &#39; + msg);
                } catch(err){
                    alert(&#39;Oops , unable to copy!&#39;);
                }
            })
        })()
    </script>

2. Utilisez la méthode js native avec la zone de saisie

Pour copier l'entrée, le texte dans la zone de texte

    <input type="text" id="input" value="17373383"> <br>
    <button type="button" id="button">复制输入框中内容</button>
    <script>
        (function(){
            button.addEventListener(&#39;click&#39;, function(){
                input.select();
                document.execCommand(&#39;copy&#39;);
                alert(&#39;复制成功&#39;);
            })
        })()
    </script>

peut également être étendu, ayant 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

Méthode de référence :
NPM npm install --save clipboard<code>npm install --save clipboard<br>CDN 3dfa91727b7c166ef4e937a07390aa9d2cacc6d41bbb37262a98f745aa00fbf0

                <!--默认是截取.btn中的 data-clipboard-text的属性值-->
                <!-- <button class="btn" data-clipboard-text="3">Copy</button> -->
                
                <!--截取input输入框中的值-->
                <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
            
                <!-- Trigger -->
                <button class="btn" data-clipboard-target="#foo">
                    <img src="assets/clippy.svg" alt="Copy to clipboard">
                </button>
            
                <script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js"></script>
            
                <script>
            
                   
                    var clipboard = new ClipboardJS(&#39;.btn&#39;);
                    
                    clipboard.on(&#39;success&#39;, function (e) {
                        console.log(e);
                    });
                    clipboard.on(&#39;error&#39;, function (e) {
                        console.log(e);
                    });
                    
                </script>

Il existe de nombreuses utilisations avancées dans dessus, vous pouvez accéder à la logique du site officiel pour plus de détails.

Plug-in Clipboard fourni par le framework Vue vue-clipboard2

    import Vue from 'vue'
    import VueClipboard from 'vue-clipboard2'
     
    VueClipboard.config.autoSetContainer = true // add this line
    Vue.use(VueClipboard)

<.>

Échantillon1

    <p id="app"></p>     
    <template id="t">
      <p class="container">
        <input type="text" v-model="message">
        <button type="button"
          v-clipboard:copy="message"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError">Copy!</button>
      </p>
    </template>    
    <script>
    new Vue({
      el: &#39;#app&#39;,
      template: &#39;#t&#39;,
      data: function () {
        return {
          message: &#39;Copy These Text&#39;
        }
      },
      methods: {
        onCopy: function (e) {
          alert(&#39;You just copied: &#39; + e.text)
        },
        onError: function (e) {
          alert(&#39;Failed to copy texts&#39;)
        }
      }
    })
    </script>

Échantillon2

      <p id="app"></p>     
      <template id="t">
        <p class="container">
        <input type="text" v-model="message">
        <button type="button" @click="doCopy">Copy!</button>
        </p>
      </template>
     
      <script>
      new Vue({
        el: &#39;#app&#39;,
        template: &#39;#t&#39;,
        data: function () {
          return {
            message: &#39;Copy These Text&#39;
          }
        },
        methods: {
          doCopy: function () {
            this.$copyText(this.message).then(function (e) {
              alert(&#39;Copied&#39;)
              console.log(e)
            }, function (e) {
              alert(&#39;Can not copy&#39;)
              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'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment implémenter une barre de progression simple côté mobile via des événements tactiles HTML5

Html5 mobile side est une implémentation d'animation de défilement primée et transparente

l'événement tactile HTML5 implémente un glissement de haut en bas de la page de l'écran tactile

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!