Implementation code of Html5 clipboard function

Recently, Vue was used to develop the embedded H5 of Line (a Japanese and Korean platform similar to China's WeChat). One of the requirements is to paste the current link, then send it to the PC and open it on the computer. All the collection found the following situations:

This situation applies to copying text in non-input boxes to the clipboard

 <h1 id=content>Copied content</h1> <button id=button>Click to copy</button> <script> (function(){ button.addEventListener('click', function(){ var copyDom = document .querySelector('#content'); //Create a selected range var range = document.createRange(); range.selectNode(copyDom); //Remove content from the clipboard window.getSelection().removeAllRanges(); //Add new content to the clipboard window.getSelection().addRange(range); //Copy var successful = document.execCommand( 'copy'); try{ var msg = successful ? successful : failed; alert('Copy command was : ' + msg); } catch(err){ alert('Oops , unable to copy!'); } }) })() </script>

Used to copy text in input, textarea

 <input type=text id=input value=17373383> <br> <button type=button id=button>Copy the content in the input box</button> <script> (function(){ button.addEventListener('click', function (){ input.select(); document.execCommand('copy'); alert('copy successful'); }) })() </script>

This method can also be extended and serves the same purpose as method 1. Dynamically create an input box, set its content to the content you want to copy, and finally remove or hide it.

3.js copy content to clipboard plug-in (clipboard.js)

clipboard.js official website

clipboard.js CDN address

Quote:

NPM npm install --save clipboard

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

 <!--The default is to intercept the attribute value of data-clipboard-text in .btn--> <!-- <button class=btn data-clipboard-text=3>Copy</button> --> <!- -Intercept the value in the input input box--> <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('success', function (e) { console.log(e); }); clipboard.on('error', function (e) { console.log(e); }); </script>

There are many advanced usages in it. You can go to the official website logic for more details. Clipboard official website

4. The clipboard plug-in vue-clipboard2 provided by the Vue framework

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

Sample1

 <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>Copy!</button> </div> </template> <script> new Vue({ el: '#app', template: '#t', data: function () { return { message: 'Copy These Text' } }, methods: { onCopy: function (e) { alert('You just copied: ' + e.text) }, onError: function (e) { alert('Failed to copy texts') } } }) </script>

Sample2

 <div id=app></div> <template id=t> <div class=container> <input type=text v-model=message> <button type=button @click=doCopy>Copy!</button> < /div> </template> <script> new Vue({ el: '#app', template: '#t', data: function () { return { message: 'Copy These Text' } }, methods: { doCopy: function () { this.$copyText(this.message).then(function (e) { alert('Copied') console.log(e) }, function (e) { alert('Can not copy') console.log(e) }) } } }) </script>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.