Implementierung der HTML5-Zwischenablagefunktion

In diesem Artikel wird hauptsächlich der Implementierungscode der HTML5-Zwischenablagefunktion vorgestellt. Der Inhalt ist ziemlich gut und wird als Referenz dienen.

Vue wurde kürzlich zur Entwicklung des eingebetteten H5 von Line (einer japanischen und koreanischen Plattform ähnlich dem chinesischen WeChat) verwendet. Eine der Anforderungen besteht darin, den aktuellen Link einzufügen, ihn dann an den PC zu senden und zu öffnen Der Computer. Nach der gesamten Sammlung habe ich mehrere Situationen gefunden:

1. Native js-Methode ohne Eingabeeingabefeld

Diese Situation eignet sich zum Kopieren von Nicht-Eingabefeldern Text in der Zwischenablage

     <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. Native js-Methode mit Eingabefeld

zum Kopieren des Textes in der Eingabe, Textbereich

    <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>

Diese Methode kann auch erweitert werden und erfüllt den gleichen Zweck wie Methode 1. Erstellen Sie dynamisch ein Eingabefeld, legen Sie dessen Inhalt auf den Inhalt fest, den Sie kopieren möchten, und entfernen oder verbergen Sie ihn schließlich.

3.js-Plug-in zum Kopieren von Inhalten in die Zwischenablage (clipboard.js)

Offizielle Website von Clipboard.js
CDN-Adresse von Clipboard.js

Referenzmethode:
NPM npm install --save clipboard<code>npm install --save clipboard<br/>CDN <script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js"></script>

                <!--默认是截取.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>

Es gibt viele erweiterte Verwendungsmöglichkeiten darin, Weitere Informationen finden Sie auf der offiziellen Website von Logic

4. Clipboard-Plug-in bereitgestellt vom Vue-Framework vue-clipboard2

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

Beispiel1

    <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>

Beispiel2

      <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>

Das Obige ist der gesamte Inhalt dieses Artikels Ich hoffe, dass es für alle beim Lernen hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

So implementieren Sie einen einfachen Fortschrittsbalken auf der mobilen Seite durch HTML5-Touch-Ereignisse

Html5 Mobile Seite ist preisgekrönt und eine nahtlose Scroll-Animation ist implementiert

HTML5-Touch-Event ist implementiert, um die Touchscreen-Seite nach oben und unten zu verschieben

Das obige ist der detaillierte Inhalt vonImplementierung der HTML5-Zwischenablagefunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!