Kode implementasi fungsi clipboard Html5

Baru-baru ini, Vue digunakan untuk mengembangkan H5 Line yang tertanam (platform Jepang dan Korea mirip dengan WeChat Tiongkok). Salah satu persyaratannya adalah menempelkan tautan saat ini, lalu mengirimkannya ke PC dan membukanya di komputer. Semua koleksi menemukan situasi berikut:

Situasi ini berlaku untuk menyalin teks di kotak non-input ke clipboard

 <h1 id=content>Konten yang disalin</h1> <button id=button>Klik untuk menyalin</button> <script> (function(){ button.addEventListener('click', function(){ var copyDom = document . querySelector('#content'); //Membuat rentang yang dipilih var range = document.createRange(); //Hapus konten dari clipboard window.getSelection().removeAllRanges(); //Tambahkan konten baru ke clipboard window.getSelection().addRange(range); //Salin var sukses = document.execCommand( 'copy') ; coba{ var pesan = berhasil ? berhasil : gagal; peringatan('Salin perintah tadi : ' + pesan } catch(err){ peringatan('Ups, tidak bisa salin!');

Digunakan untuk menyalin teks di input, textarea

 <input type=text id=input value=17373383> <br> <button type=button id=button>Salin konten di kotak input</button> <script> (function(){ button.addEventListener('click' , fungsi (){ input.select(); document.execCommand('salin'); peringatan('salinan berhasil');

Metode ini juga dapat diperluas dan memiliki tujuan yang sama seperti metode 1. Buat kotak masukan secara dinamis, atur kontennya ke konten yang ingin Anda salin, dan terakhir hapus atau sembunyikan.

3.js menyalin konten ke plug-in clipboard (clipboard.js)

situs resmi clipboard.js

alamat CDN clipboard.js

Mengutip:

NPM npm install --save clipboard

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

 <!--Defaultnya adalah mencegat nilai atribut data-clipboard-text di .btn--> <!-- <button class=btn data-clipboard-text=3>Salin</button> --> < !- -Mencegat nilai di kotak masukan 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 </button> <skrip src=https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js></ skrip> <skrip> var clipboard = new ClipboardJS('.btn'); clipboard.on('sukses', fungsi (e) { konsol.log(e); clipboard.on('kesalahan', fungsi (e) { konsol.log(e); </skrip>

Ada banyak penggunaan lanjutan di dalamnya. Anda dapat mengunjungi situs resmi logika untuk lebih jelasnya

4. Plug-in clipboard vue-clipboard2 disediakan oleh framework Vue

 impor Vue dari 'vue' impor VueClipboard dari 'vue-clipboard2' VueClipboard.config.autoSetContainer = true // tambahkan baris ini Vue.use(VueClipboard)

Contoh1

 <div id=app></div> <template id=t> <div class=container> <tipe input=teks v-model=message> <button type=button v-clipboard:copy=message v-clipboard:success =onCopy v-clipboard:error=onError>Salin!</button> </div> </template> <skrip> Vue baru({ el: '#app', templat: '#t', data: function () { return { pesan: 'Salin Teks Ini' } }, metode: { onCopy: function (e) { alert('Anda baru saja menyalin: ' + e.text) }, onError: function (e) { alert('Gagal menyalin teks') } } }) </script>

Contoh2

 <div id=app></div> <template id=t> <div class=container> <input type=text v-model=message> <button type=button @click=doCopy>Salin!</button> < /div> </template> <script> new Vue({ el: '#app', template: '#t', data: function () { return { pesan: 'Salin Teks Ini' } }, metode: { doCopy: function () { this.$copyText(this.message).then(function (e) { alert('Copied') console.log(e) }, function (e) { alert('Tidak dapat menyalin') konsol.log(e) }) } } }) </script>

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.